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.
<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
<img class="mdl-shadow--2dp" src="./assets/images/lumia_950.jpg" alt="An image" style="max-width:600px; width: 100%;"></img>
Text Inputs
<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
<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>
Link
By default, a link uses the accent color.
Use .ric-link__no-accent
if you do not want the accent color to be applied to a certain link.
<a href="#">Link</a><br>
<a class="ric-link--no-accent" href="#">Link</a>
Tooltip
Used to help the user to understand the action that will happen.
<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
<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
Nested collapsable element
Large content
Large content
keyboard_arrow_downAvoid 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
<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>
Link List
<ul class="ric-link-list">
<li class="ric-link-list__element"><a href="#" title="any link">any link</a></li>
<li class="ric-link-list__element"><a href="#" title="any link">any link</a></li>
<li class="ric-link-list__element"><a href="#" title="any link">any link</a></li>
<li class="ric-link-list__element"><a href="#" title="any link">any link</a></li>
<li class="ric-link-list__element"><a href="#" title="any link">any link</a></li>
</ul>
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>