close
ricardo.ch wird neu. Auch diese Seite gehört dazu. Mehr erzählen wir dir hier: ricardo stories
ricardo styleguide v.9.0.3

Elements

Buttons

.ric-button--primary : Triggers the primary action of the page it is placed on. Place only one primary button on each page/dialog.
.ric-button--flat : Has the appearance of a link but the dimensions and modifiers of a button.
.ric-button--icon--flat : Only used if there is a space constraint. Better use a plain text button.
.ric-button--large : Use to increase the visibility.
.ric-button--loading : Use to show that the action is happenning.
.ric-button--success : Action perform successfuly.
.ric-button--ordinary : Button that shouldn't drag attention.

Link

    <button class="ric-button--primary mdl-js-button mdl-js-ripple-effect">Primary</button>
    <button class="ric-button--flat mdl-js-button mdl-js-ripple-effect">Flat</button>
    <button class="ric-button--icon--flat mdl-js-button mdl-js-ripple-effect"><i class="material-icons">star_border</i></button>
    <button class="ric-button--large mdl-js-button mdl-js-ripple-effect">Large</button>
    <button class="ric-button--ordinary">Ordinary</button>
    <button class="ric-button--primary ric-button--loading mdl-js-button">
      <div class="ric-button-spinner-container">
        <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
      </div>
      <span class="ric-button__label">Loading</span>
    </button>
    
    <button class="ric-button--primary ric-button--success mdl-js-button"><i class="material-icons">check</i></button>
    
    <a href="#link-button" class="ric-button--primary mdl-js-button mdl-js-ripple-effect">Link</a>

Checkboxes

Checkboxes go always in a new line.


    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
        <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
        <span class="mdl-checkbox__label">Checked</span>
    </label>
    
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
        <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
        <span class="mdl-checkbox__label">Not checked</span>
    </label>
    
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-3">
        <input type="checkbox" id="checkbox-3" class="mdl-checkbox__input" disabled>
        <span class="mdl-checkbox__label">Disabled</span>
    </label>

Radios


    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
      <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="option-1" checked>
      <span class="mdl-radio__label">Selected</span>
    </label>
    
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
      <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
      <span class="mdl-radio__label">Not selected</span>
    </label>
    
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
      <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3" disabled>
      <span class="mdl-radio__label">Disabled</span>
    </label>

Image

An image

    <img class="mdl-shadow--2dp" src="./assets/images/lumia_950.jpg" alt="An image" style="max-width:600px; width: 100%;"></img>

Text Inputs

This is an error!

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    	<input class="mdl-textfield__input" type="text" id="sample1">
    	<label class="mdl-textfield__label" for="sample1">Input text</label>
    </div>
    
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid">
    	<input class="mdl-textfield__input" type="text" id="sample2" pattern="^/([a-z0-9]+)">
    	<label class="mdl-textfield__label" for="sample2">Input text with error</label>
    	<span class="mdl-textfield__error">This is an error!</span>
    </div>
    
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    	<input class="mdl-textfield__input" type="text" id="sample3" value="dirty">
    	<label class="mdl-textfield__label" for="sample3">Input with a value</label>
    </div>

Select

arrow_drop_down
arrow_drop_down

    <div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
    	<select class="mdl-selectfield__select" id="professsion" name="professsion">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
        <option value="option3">option 3</option>
        <option value="option4">option 4</option>
        <option value="option5">option 5</option>
      </select>
    	<div class="mdl-selectfield__icon"><i class="material-icons">arrow_drop_down</i></div>
    	<label class="mdl-selectfield__label" for="professsion">Profession</label>
    </div>
    
    <div class="mdl-selectfield mdl-js-selectfield">
    	<label class="mdl-selectfield__label" for="professsion">Non floating label</label>
    	<select class="mdl-selectfield__select" id="professsion" name="professsion">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
        <option value="option3">option 3</option>
        <option value="option4">option 4</option>
        <option value="option5">option 5</option>
      </select>
    	<div class="mdl-selectfield__icon"><i class="material-icons">arrow_drop_down</i></div>
    </div>

Textarea


    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    	<textarea class="mdl-textfield__input" type="text" rows="3" id="sample5"></textarea>
    	<label class="mdl-textfield__label" for="sample5">Text lines...</label>
    </div>

Table

Date Article name Quantity Unit price
2017
Jul 10
Acrylic (Transparent) 2 CHF 2.90
Jul 9
Plywood (Birch) 5 CHF 1.25
2016
Dec 14
Laminate (Gold on Blue) 1 CHF 2.35

    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable ric-table">
    	<thead class="ric-table__headers">
    		<tr class="ric-table__row">
    			<th class="ric-table__header ric-table__header--short-date mdl-data-table__cell--non-numeric">Date</th>
    			<th class="ric-table__header mdl-data-table__cell--non-numeric">Article name</th>
    			<th class="ric-table__header">Quantity</th>
    			<th class="ric-table__header">Unit price</th>
    		</tr>
    	</thead>
    	<tbody class="ric-table__body">
    		<tr class="ric-table__row ric-table__row--second-header">
    			<td class="ric-table__cell ric-table__cell--second-header">
    				<span class="ric-table__data ric-table__data--second-header">2017</span>
    			</td>
    			<td class="ric-table__cell ric-table__cell--second-header" colspan="4"></td>
    		</tr>
    		<tr class="ric-table__row">
    			<td class="ric-table__cell mdl-data-table__cell--non-numeric">
    				<div class="ric-table__data ric-table__data--short-date">
    					<span class="ric-table__data--month">Jul</span>
    					<span class="ric-table__data--day">10</span>
    				</div>
    			</td>
    			<td class="ric-table__cell mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
    			<td class="ric-table__cell">2</td>
    			<td class="ric-table__cell">CHF 2.90</td>
    		</tr>
    		<tr class="ric-table__row">
    			<td class="ric-table__cell mdl-data-table__cell--non-numeric">
    				<div class="ric-table__data ric-table__data--short-date">
    					<span class="ric-table__data--month">Jul</span>
    					<span class="ric-table__data--day">9</span>
    				</div>
    			</td>
    			<td class="ric-table__cell mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
    			<td class="ric-table__cell">5</td>
    			<td class="ric-table__cell">CHF 1.25</td>
    		</tr>
    		<tr class="ric-table__row ric-table__row--second-header">
    			<td class="ric-table__cell ric-table__cell--second-header">
    				<span class="ric-table__data ric-table__data--second-header">2016</span>
    			</td>
    			<td colspan="4"></td>
    		</tr>
    		<tr class="ric-table__row">
    			<td class="ric-table__cell mdl-data-table__cell--non-numeric">
    				<div class="ric-table__data ric-table__data--short-date">
    					<span class="ric-table__data--month">Dec</span>
    					<span class="ric-table__data--day">14</span>
    				</div>
    			</td>
    			<td class="ric-table__cell mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
    			<td class="ric-table__cell">1</td>
    			<td class="ric-table__cell">CHF 2.35</td>
    		</tr>
    	</tbody>
    </table>

Tooltip

Used to help the user to understand the action that will happen.

add
Tooltip
info_outline
This is a very long text. which can serve as an helper for the user.

    <div id="tooltip" class="icon material-icons">add</div>
    <div class="mdl-tooltip" for="tooltip">
    	Tooltip
    </div>
    
    <div id="tooltip2" class="icon material-icons">info_outline</div>
    <div class="mdl-tooltip mdl-tooltip--right mdl-tooltip--medium" for="tooltip2" style="font-weight: 400;">
    	This is a very long text. which can serve as an helper for the user.
    </div>

Elevations

Elevation 2dp
Elevation 4dp
Elevation 24dp

    <div class="mdl-shadow--2dp" style="padding: 16px; background-color: white; display: inline-block;">
    	Elevation 2dp
    </div>
    
    <div class="mdl-shadow--4dp" style="padding: 16px; background-color: white; display: inline-block;">
    	Elevation 4dp
    </div>
    
    <div class="mdl-shadow--24dp" style="padding: 16px; background-color: white; display: inline-block;">
    	Elevation 24dp
    </div>

Sliders

Sliders

Simple slider

Slider with input value with step

Multiple value slider


    <h4>Simple slider</h4>
    
    <input id="simpleSliderSample" class="ric-slider ric-js-slider" type="range" min="0" max="100" value="25" tabindex="0">
    
    
    <h4>Slider with input value with step</h4>
    
    <div id="inputSliderSample" class="ric-slider ric-js-slider">
    	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    		<input class="mdl-textfield__input ric-js-slider-value" id="sliderSampleMax" type="number" step="5" min="1980" max="2015" value="1990">
    		<label class="mdl-textfield__label" for="sliderSampleMax">Maximum year</label>
    	</div>
    </div>
    
    <h4>Multiple value slider</h4>
    
    <div id="multiInputSliderSample" class="ric-slider ric-js-slider">
    	<div class="ric-layout__horizontal">
    		<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    			<input class="mdl-textfield__input ric-js-slider-value" id="sliderSampleFrom" type="number" min="0" max="100" value="25" data-infinity="100">
    			<label class="mdl-textfield__label" for="sliderSampleFrom">From</label>
    		</div>
    		<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    			<input class="mdl-textfield__input ric-js-slider-value" id="sliderSampleTo" type="number" min="0" max="100" value="50" data-infinity="100">
    			<label class="mdl-textfield__label" for="sliderSampleTo">To <span class="ric-slider__infinity-label">and more</span></label>
    		</div>
    	</div>
    </div>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.min.js"></script>
    
    
    <script>
    	window.addEventListener('load', function() {
    		var simpleSliderSample = document.getElementById('simpleSliderSample');
    		var output = document.createElement('div');
    
    		simpleSliderSample.parentNode.insertBefore(output, simpleSliderSample.nextSibling);
    
    		function updateSliderOutput(value) {
    			output.innerHTML = value;
    		}
    
    		// Timeout is not necessary if javascript is executed after ricardo.js.
    		// Just make sure your custom script is loaded after the styleguide js.
    		setTimeout(function() {
    			simpleSliderSample.noUiSlider.on('set', updateSliderOutput);
    		}, 10);
    
    	})
    </script>

Collapsable

Simple collapsable element

Fueltype

keyboard_arrow_down

Nested collapsable element

Large content

Large content

keyboard_arrow_down

Avoid scrollbars in both direction

LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum


    <h4>Simple collapsable element</h4>
    
    <div class='ric-collapsable' style="width: 240px;">
    	<a class="ric-collapsable__toggle">
    		<h4 class="ric-sidebar__menu_heading ric-collapsable__label">Fueltype</h4>
    		<i class="material-icons ric-collapsable__label__arrows-icon">keyboard_arrow_down</i>
    	</a>
    	<div class="ric-collapsable__elements">
    		<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
                <input type="checkbox" id="checkbox-4" class="mdl-checkbox__input">
                <span class="mdl-checkbox__label">Benzin</span>
            </label>
    		<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-5">
                <input type="checkbox" id="checkbox-5" class="mdl-checkbox__input">
                <span class="mdl-checkbox__label">Diesel</span>
            </label>
    		<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-6">
                <input type="checkbox" id="checkbox-6" class="mdl-checkbox__input">
                <span class="mdl-checkbox__label">Elektrisch</span>
            </label>
    		<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-7">
                <input type="checkbox" id="checkbox-7" class="mdl-checkbox__input">
                <span class="mdl-checkbox__label">Hybrid</span>
            </label>
    	</div>
    </div>
    
    <h4>Nested collapsable element</h4>
    
    <div class='ric-collapsable' style="width: 240px;">
    	<a class="ric-collapsable__toggle">
    		<h4 class="ric-sidebar__menu_heading ric-collapsable__label">Fueltype</h4>
    		<i class="material-icons ric-collapsable__label__arrows-icon">keyboard_arrow_down</i>
    	</a>
    	<div class="ric-collapsable__elements">
    		<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
                <input type="checkbox" id="checkbox-4" class="mdl-checkbox__input">
                <span class="mdl-checkbox__label">Benzin</span>
            </label>
    		<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-5">
                <input type="checkbox" id="checkbox-5" class="mdl-checkbox__input">
                <span class="mdl-checkbox__label">Diesel</span>
            </label>
    
    		<div class='ric-collapsable' style="width: 240px;">
    			<a class="ric-collapsable__toggle">
    				<h4 class="ric-sidebar__menu_heading ric-collapsable__label">Additional Filters</h4>
    				<i class="material-icons ric-collapsable__label__arrows-icon">keyboard_arrow_down</i>
    			</a>
    			<div class="ric-collapsable__elements">
    				<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-6">
                        <input type="checkbox" id="checkbox-6" class="mdl-checkbox__input">
                        <span class="mdl-checkbox__label">Elektrisch</span>
                    </label>
    				<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-7">
                        <input type="checkbox" id="checkbox-7" class="mdl-checkbox__input">
                        <span class="mdl-checkbox__label">Hybrid</span>
                    </label>
    			</div>
    		</div>
    	</div>
    </div>
    
    <h4>Large content</h4>
    
    <div class='ric-collapsable' style="width: 240px;">
    	<a class="ric-collapsable__toggle">
    		<h4 class="ric-sidebar__menu_heading ric-collapsable__label">Large content</h4>
    		<i class="material-icons ric-collapsable__label__arrows-icon">keyboard_arrow_down</i>
    	</a>
    	<div class="ric-collapsable__elements">
    		<p>Avoid scrollbars in both direction</p>
    		<p>LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    		<p>Lorem ipsum</p>
    	</div>
    </div>

Spinner


    <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>

Chip

Basic Chip Deletable Chip Preis 8000-38000

    <span class="ric-chip">
        <span class="mdl-chip__text">Basic Chip</span>
    </span>
    
    <span class="mdl-chip--deletable ric-chip">
        <span class="mdl-chip__text">Deletable Chip</span>
    <button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
    </span>
    
    <button type="button" class="ric-chip">
        <span class="mdl-chip__text">Button Chip</span>
    </button>
    
    <span class="mdl-chip--deletable ric-chip ric-chip--label">
        <span class="ric-chip__label"><span class="mdl-chip__text">Preis</span></span>
    <span class="mdl-chip__text">8000-38000</span>
    <button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
    </span>

Snackbar


    <button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
    <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
    	<div class="mdl-snackbar__text"></div>
    	<button class="mdl-snackbar__action" type="button"></button>
    </div>
    <script>
    	(function() {
    		'use strict';
    		var snackbarContainer = document.querySelector('#demo-snackbar-example');
    		var showSnackbarButton = document.querySelector('#demo-show-snackbar');
    		var handler = function(event) {
    			showSnackbarButton.style.backgroundColor = '';
    		};
    		showSnackbarButton.addEventListener('click', function() {
    			'use strict';
    			showSnackbarButton.style.backgroundColor = '#' +
    				Math.floor(Math.random() * 0xFFFFFF).toString(16);
    			var data = {
    				message: 'Button color changed.',
    				timeout: 2000,
    				actionHandler: handler,
    				actionText: 'Undo'
    			};
    			snackbarContainer.MaterialSnackbar.showSnackbar(data);
    		});
    	}());
    </script>