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.


    <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

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

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

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