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>
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
This is an error!
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Input text</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" pattern="^/([a-z0-9]+)">
<label class="mdl-textfield__label" for="sample3">Input text with error</label>
<span class="mdl-textfield__error">This is an error!</span>
</div>
Select
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>
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.
Tooltip
<div id="tooltip" class="icon material-icons">add</div>
<div class="mdl-tooltip" for="tooltip">
Tooltip
</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>