menu

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.

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--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>
      Loading
    </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

Article name Quantity Unit price
Acrylic (Transparent) 2 CHF 2.90
Plywood (Birch) 5 CHF 1.25
Laminate (Gold on Blue) 1 CHF 2.35

    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
    	<thead>
    		<tr>
    			<th class="mdl-data-table__cell--non-numeric">Article name</th>
    			<th>Quantity</th>
    			<th>Unit price</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
    			<td>2</td>
    			<td>CHF 2.90</td>
    		</tr>
    		<tr>
    			<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
    			<td>5</td>
    			<td>CHF 1.25</td>
    		</tr>
    		<tr>
    			<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
    			<td>1</td>
    			<td>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">
    			<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">
    			<label class="mdl-textfield__label" for="sliderSampleTo">To</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

Fueltype

keyboard_arrow_down

    <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>

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>