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.
<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
<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>
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>
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>
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">
<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
<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>
Search Bar
Events emmited by the autocomplete:
<div class="ric-search-bar">
<label class="ric-search-bar__icon mdl-button mdl-js-button mdl-button--icon" for="keyword">
<i class="material-icons">search</i>
</label>
<div class="ric-search-bar__input mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="q" name="q" autocomplete="off">
<label class="mdl-textfield__label" for="keyword">Search</label>
<div class="ric-autocomplete">
<ul>
</ul>
</div>
</div>
</div>
<p>Events emmited by the autocomplete: </p>
<textarea id="autocomplete-events" style="width:100%;min-height:10em"></textarea>
<script>
ric(function(event) {
window.ric_autocomplete.update([{
someRandomThings: 'random 1',
term: "iPhones",
html: "iPhones <i>in smartphones</i>"
},
{
someRandomThings: 'random 2',
term: "Android",
html: "Android <i>in smartphones</i>"
},
{
term: "Nokia",
html: "Nokia <i>in smartphones</i>"
},
{
term: "Windows",
html: "Windows phone?"
}
]);
window.ric_autocomplete.show();
var autocomplete = document.querySelector('.ric-autocomplete');
var text = document.querySelector('#autocomplete-events');
autocomplete.addEventListener('ric-autocomplete-change', function(e) {
text.value = text.value + 'Change:' + JSON.stringify(e.detail) + "\n";
});
autocomplete.addEventListener('ric-autocomplete-select', function(e) {
text.value = text.value + 'Select:' + JSON.stringify(e.detail) + "\n";
});
autocomplete.addEventListener('ric-autocomplete-new-autocomplete', function(e) {
text.value = text.value + 'New:' + JSON.stringify(e.detail) + "\n";
});
});
</script>