Aside from the material layers there is also the z-index of css. In general, avoid using higher than 100 z-index for content to keep elements from overlapping. When using z-index between 10 and 100, aim for the lower end of those and move in increments of 10 so that the single numbers can be used for easy modifications if needed.

z-index	Usage
> 1000	Used for global elements like the navbar and tooltips
10 - 100	Used for overlays such as modals and context menus
< 10	Used to make minor adjustments to content within panels, modules or templates

-

View headers

1.3

A view header should be the first element in your view to help orientate the user. If needed you can add a global floating action button (fab) to it. If you do, add the class 'with-fab' to the header. It can also have a description, if so, add the class 'with-desc' and a descriptive text in a p tag.

Note: The view header is a uniqe element in the view and not part of any other panel or element.

-

Show Hide markup


                              <h3>With fab and description</h3>
<div class="view-header with-fab with-desc">
	<div class="view-title">
		<h1><i class="mdi mdi-account"></i> First header title</h1>
		<p>Optional description of the view goes here.</p>
	</div>
	<div class="fab-wrapper">
		<button class="wfm-fab  material-depth-1"><i class="mdi mdi-plus"></i>
			<md-tooltip>Add something</md-tooltip>
		</button>
	</div>
</div>
<h3>With only fab</h3>
<div class="view-header with-fab">
	<div class="view-title">
		<h1><i class="mdi mdi-account"></i> Second header title</h1>
	</div>
	<div class="fab-wrapper">
		<button class="wfm-fab  material-depth-1"><i class="mdi mdi-plus"></i>
			<md-tooltip>Add something</md-tooltip>
		</button>
	</div>
</div>
<h3>Without fab and desc</h3>
<div class="view-header">
	<div class="view-title">
		<h1><i class="mdi mdi-account"></i> Third header title</h1>
	</div>
</div>

With fab and description

First header title

Optional description of the view goes here.

With only fab

Second header title

Without fab and desc

Third header title

Input

1.4

Standard inputs dont need any added style. If you want to build a form with several inputs and actions on submit, please look at the form layout.

Note: <br/> tags are for styleguide demo purpose only.

-

Show Hide markup


                              <input type="text" placeholder="Name..."  />
<br/>
<br/>
<input type="password" placeholder="Password..." />
<br/>
<br/>
<input type="number" placeholder="Numbers..." />

Input with prepend

1.5

Inputs with prepend icon can be used when the input effects something that can easily be represented by an icon. This way we can rely on it taking up the same space in all languages. However, don't mix standard inputs and prepend ones. These inputs should have a placeholder and maybe a tooltip for explanation, since the icon is used in place of a label.

-

Show Hide markup


                              <label for="filter" class="input-icon">
 <i class="mdi mdi-filter-outline">
   <input type="text" id="filter" placeholder="filter roles...">
   <md-tooltip>Filter</md-tooltip>
 </i>
</label>

File upload

1.6

Let users import data from files to cuts down on a lot of maual entry.

-

Show Hide markup


                              <label class="fileUpload">
   <input id="uploadBtnId" type="file" class="upload" value="" onchange="javascript:document.getElementById('uploadFile').value = this.files[0].name;" />
   <i class="mdi mdi-file-outline uploadBtn">
	<md-tooltip>Import a file</md-tooltip>
	</i>
</label>
<input id="uploadFile" class="disableInputField" disabled="disabled" value="No file selected" />

Select

1.7

The select is used to provide many options to the user and make complex selections simpler.

Note: The ng-bind is for styleguide demo purpose only, use { {item} } in the project.

-

Show Hide markup


                              <md-select ng-model="model" placeholder="Pick an option">
	<md-option ng-repeat="item in demos" ng-value="item.id"><span ng-bind="item.id"></span></md-option>
</md-select>

Radio button

1.8

Radio buttons are a group of options that can only have one item selected at a time.

Show Hide JavaScript


      
  $scope.demos = [{id: '1'}, {id: '2'}, {id: '3'}, {id: '4'}];

-

Show Hide markup


                              <h3>Simple (<span ng-bind="data1"></span>)</h3>
<form>
 <md-radio-group ng-model="data1">
   <md-radio-button value="Option 1" aria-label="radio">Option 1</md-radio-button>
   <md-radio-button value="Option 2" aria-label="radio">Option 2</md-radio-button>
   <md-radio-button value="Option 3" aria-label="radio">Option 3</md-radio-button>
 </md-radio-group>
<h3>Repeated (<span ng-bind="data2"></span>)</h3>
 <md-radio-group ng-model="data2">
   <md-radio-button ng-repeat="item in demos" ng-value="item.id" aria-label="">
    Option <span ng-bind="item.id"></span>
   </md-radio-button>
 </md-radio-group>
</form>

Simple ()

Checkbox

1.9

Checkboxes are used for selecting multiple input options.

Show Hide JavaScript


      
  $scope.demos = [{id: '1'}, {id: '2'}, {id: '3'}, {id: '4'}];

-

Show Hide markup


                               <h3>Simple</h3>
 <md-checkbox ng-model="checkData1" aria-label="Checkbox">Option 1</md-checkbox>
 <md-checkbox ng-model="checkData2" aria-label="Checkbox">Option 2</md-checkbox>
 <md-checkbox ng-model="checkData3" aria-label="Checkbox">Option 3</md-checkbox>
 <h3>Repeated</h3>
 <md-checkbox ng-repeat="item in demos" ng-model="item.checked" aria-label="Checkbox">Option <span ng-bind="item.id"></span></md-checkbox>

Simple

Option 1

Option 2

Option 3

Repeated

Option

Switch

1.10

The switch is used to toggle between two states (for example show/hide, using Angulars ng-show or ng-hide to toggle other elements).

-

Show Hide markup


                              <md-switch ng-model="switchData1" aria-label="Switch">
<span ng-if="!switchData1">Toggle me</span>
<span ng-if="switchData1">Thanks!</span>
</md-switch>

Toggle me Thanks!

Flat button

1.11

When using buttons try helping the user understand what the action will do and what object it will effect. This can be done using good terms and tooltips. For more details take a look at the material design buttons

The flat buttons are 'printed' on another pice of material and only show its area when hovered, it uses capital letters to differentiate it from a link.

Note: A primary button is UNIQUE on a page and is for the MAIN action on that page.

-

Show Hide markup


                              <button class="wfm-btn wfm-btn-invis-default">Default</button>
<button class="wfm-btn wfm-btn-invis-primary">Primary</button>
<button class="wfm-btn wfm-btn-invis-disabled">Disabled</button>
<button class="wfm-btn wfm-btn-invis-default" disabled>Default disabled</button>
<button class="wfm-btn wfm-btn-invis-primary" disabled>Primary disabled</button>

Raised button

1.12

The raised buttons is itself a pice of material and its area is always visible. Use raised buttons when there is no panel/area behind (around) the button.

-

Show Hide markup


                              <button class="wfm-btn wfm-btn-default">Default</button>
<button class="wfm-btn wfm-btn-primary">Primary</button>
<button class="wfm-btn wfm-btn-primary-disabled">Disabled</button>
<button class="wfm-btn wfm-btn-default" disabled>Default disabled</button>
<button class="wfm-btn wfm-btn-primary" disabled>Primary disabled</button>

Action button

1.13

The action button functions similarly to the raised buttons except that are on the floating layer above the entire layout. They are also similar in that they are unique in each view, indicating the primary positive action. More about when to use it can be found in the google material guidelines. A action button is always located inside the view header.

-

Show Hide markup


                              <button class="wfm-fab  material-depth-1"><i class="mdi mdi-account"></i>
	<md-tooltip>My account</md-tooltip>
</button>
<button class="wfm-fab  material-depth-1 info"><i class="mdi mdi-arrow-right"></i>
	<md-tooltip>Carry on</md-tooltip>
</button>
<button class="wfm-fab  material-depth-1 success"><i class="mdi mdi-plus"></i>
	<md-tooltip>Add a thing</md-tooltip>
</button>

Action button (removing)

1.14

The action button can not be disabled, rather it should simply not be displayed if unavailable. It is possible to trigger the animations using ng-click and/or ng-class.

These animations should only be applied to action buttons.

-

Show Hide markup


                              <button class="wfm-fab grow-out  material-depth-1"><i class="mdi mdi-plus" ></i>
	<md-tooltip>I appear when needed</md-tooltip>
</button>
<button class="wfm-fab  material-depth-1" ng-class="{'shrink-in':animateIn === 'trigger1'}" ng-click="animateIn = 'trigger1'">
	<i class="mdi mdi-close"></i>
	<md-tooltip>Click me and im gone</md-tooltip>
</button>

Icon button

1.15

Icons can be used as buttons or toggles. In this case they should have a bigger trigger area, a cursor pointer and preferably a tooltip to explain its action. They can also house a context menu. Using buttons, icons can be disabled.

-

Show Hide markup


                              <h3>Simple</h3>
<div tabindex=0 class="context-menu card-context">
	<i class="mdi mdi-cake"></i>
	<md-tooltip>Options</md-tooltip>
</div>
<h3>Color</h3>
<button tabindex=0 class="context-menu card-context notice-info">
	<i class="mdi mdi-comment-outline"></i>
	<md-tooltip>info</md-tooltip>
</button>
<button tabindex=0 class="context-menu card-context notice-success">
	<i class="mdi mdi-comment-check-outline"></i>
	<md-tooltip>success</md-tooltip>
</button>
<button tabindex=0 class="context-menu card-context" disabled>
	<i class="mdi mdi-comment-remove-outline"></i>
	<md-tooltip>disabled</md-tooltip>
</button>
<h3>Loading</h3>
<div tabindex=0 class="context-menu card-context context-loading">
	<i class="mdi mdi-cake"></i>
	<md-tooltip>Options</md-tooltip>
</div>
<h3>Toggle</h3>
<div tabindex=0 class="context-menu card-context" ng-click="toggle = !toggle">
	<i class="mdi mdi-account" ng-class="{'mdi-account-outline':toggle}"></i>
	<md-tooltip>Toggle something</md-tooltip>
</div>
<div tabindex=0 class="context-menu card-context" ng-click="toggle2 = !toggle2" ng-class="{'notice-success':toggle2, 'notice-info':!toggle2}">
	<i class="mdi mdi-checkbox-blank-outline" ng-class="{'mdi-checkbox-marked':toggle2}"></i>
	<md-tooltip>Toggle something</md-tooltip>
</div>
<div tabindex=0 class="context-menu card-context" ng-click="loading()" ng-class="{'context-loading':waitAMoment}">
	<i class="mdi mdi-cake"></i>
	<md-tooltip>Options</md-tooltip>
</div>

Simple

Color

Loading

Toggle

Button group

1.16

A dynamic group of buttons that act in a radio way

Attribute Name	Usage
items	Array of button labels
selected	Item to be selected
output	Callback function on item click
btn-class	Style for unselected item ('wfm-btn-default' / 'wfm-btn-invis-default')
selection-class	Style for selected item ('wfm-btn-primary' / 'wfm-btn-invis-primary')

-

Show Hide markup


                              <h3>Raised <span ng-bind="outputItem1"></span> </h3>
<wfm-btn-group items="demoArr" selected="demoArr[1]" output="outputCallback1" btn-class="'wfm-btn-default'" selection-class="'wfm-btn-primary'"></wfm-btn-group>
<br/>
<h3>Flat <span ng-bind="outputItem2"></span> </h3>
<wfm-btn-group items="demoArr" output="outputCallback2" btn-class="'wfm-btn-invis-default'" selection-class="'wfm-btn-invis-primary'"></wfm-btn-group>

Raised

Flat

Slider

1.17

The slider is used to input a range or value on a scale. It can be controlled with left and right arrow keys for greater accuracy if focused.

-

Show Hide markup


                              <label>Generic:</label><md-slider flex min="0" max="10" aria-label="slider"></md-slider>
<label>With label:</label><md-slider flex md-discrete min="0" max="100" aria-label="slider"></md-slider>
<label>Vertical.</label><md-slider flex md-discrete min="0" max="100" aria-label="slider" md-vertical></md-slider>

Generic:

With label:

Vertical.

Headers

1.18

Our standard font-family is 14px Calibri ('Calibri,Segoe,Segoe UI,Arial,sans-serif). Avoid introducing other font types or sizes as this may lead to issues with layout or translation.

-

Show Hide markup


                              <h1>View header</h1>
<h2>Panel header</h2>
<h3>Text header</h3>
<p>Plain text</p>

View header

Panel header

Text header

Plain text

Context menu

1.19

A content menu contains only a list of actions, to keep them manageable, try to limit the number of actions displayed within to a maximum of 5. Additionally a context menu can not trigger another context menu from within itself.

-

Show Hide markup


                               <h3>Button menu trigger:</h3>
 <div tabindex=0 class="context-menu wfm-btn wfm-btn-default">
 	Place me on the left
 	<span class="context-menu-right">
 		<ul class="wfm-list">
 			<li><i class="mdi mdi-account"></i>Sign out</li>
 			<li><i class="mdi mdi-plus"></i>Add a new agent</li>
 			<li><i class="mdi mdi-alert"></i>Drop agents table</li>
 		</ul>
 	</span>
 </div>
 <div tabindex=0 class="context-menu wfm-btn wfm-btn-default">
 	place me in the middle
 	<span class="context-menu-bottom">
 		<ul class="wfm-list">
 			<li><i class="mdi mdi-account"></i>Sign out</li>
 			<li><i class="mdi mdi-plus"></i>Add a new agent</li>
 			<li><i class="mdi mdi-alert"></i>Drop agents table</li>
 		</ul>
 	</span>
 </div>
 <div tabindex=0 class="context-menu wfm-btn wfm-btn-default">
 	Place me on the right
 	<span class="context-menu-left">
 		<ul class="wfm-list">
 			<li><i class="mdi mdi-account"></i>Sign out</li>
 			<li><i class="mdi mdi-plus"></i>Add a new agent</li>
 			<li><i class="mdi mdi-alert"></i>Drop agents table</li>
 		</ul>
 	</span>
 </div>
 <h3>Icon menu trigger:</h3>
 <div tabindex=0 class="context-menu card-context">
 	<i class="mdi mdi-dots-vertical"></i>
 	<span class="context-menu-right">
 		<ul class="wfm-list">
 			<li><i class="mdi mdi-account"></i>Sign out</li>
 			<li><i class="mdi mdi-plus"></i>Add a new agent</li>
 			<li><i class="mdi mdi-alert"></i>Drop agents table</li>
 		</ul>
 	</span>
 </div>
 <div tabindex=0 class="context-menu card-context">
 	<i class="mdi mdi-dots-vertical"></i>
 	<span class="context-menu-bottom">
 		<ul class="wfm-list">
 			<li><i class="mdi mdi-account"></i>Sign out</li>
 			<li><i class="mdi mdi-plus"></i>Add a new agent</li>
 			<li><i class="mdi mdi-alert"></i>Drop agents table</li>
 		</ul>
 	</span>
 </div>
 <div tabindex=0 class="context-menu card-context">
 	<i class="mdi mdi-dots-vertical"></i>
 	<span class="context-menu-left">
 		<ul class="wfm-list">
 			<li><i class="mdi mdi-account"></i>Sign out</li>
 			<li><i class="mdi mdi-plus"></i>Add a new agent</li>
 			<li><i class="mdi mdi-alert"></i>Drop agents table</li>
 		</ul>
 	</span>
 </div>
 <h3>Menu with keyboard shortcuts:</h3>
 <div tabindex=0 class="context-menu card-context">
 	<i class="mdi mdi-dots-vertical"></i>
 	<span class="context-menu-right">
 		<ul class="wfm-list">
 			<li>
         <span class="pull-left">Select all</span>
         <span class="pull-right">Alt+A</span>
       </li>
 			<li>
         <span class="pull-left">Duplicate</span>
         <span class="pull-right">Ctrl+C</span>
       </li>
 			<li>
         <span class="pull-left">Navigate</span>
         <span class="pull-right">Shift+Down Arrow</span>
       </li>
 		</ul>
 	</span>
 </div>

Button menu trigger:

Icon menu trigger:

Menu with keyboard shortcuts:

Pop-up menu

1.20

A popup menu is similar to a context menu but can contain any number of things. It will adapt to the width of the content so be careful not to squeeze in elements that wont fit on small screens.

-

Show Hide markup


                              <button class="wfm-btn wfm-btn-default" ng-click="toggle =!toggle">Default</button>
<wfm-popup show="toggle">
 <div class="sub-header">
   <h2>Popup Title</h2>
 </div>
 <div class="con-row">
   <div class="con-flex">
       Content
     </div>
 </div>
 <div class="con-footer">
   <button class="wfm-btn wfm-btn-invis-default">Advanced</button>
   <button class="wfm-btn wfm-btn-invis-primary">Options</button>
 </div>
</wfm-popup>

Popup Title

Content

Simple list

1.21

For when you just want to display some data in a simple list without any actions.

If you need actions (click or select), go to "Actions list".

Optionally a list item can have a small, one sentence description attached to it. If more information is needed about the items consider using a modal or table.

-

Show Hide markup


                              <ul class="wfm-simple-list">
	<li>
		Tea
		<div class="subtext">Its hot</div>
	</li>
	<li>
		Beer
		<div class="subtext">Tasty but expensive</div>
	</li>
	<li>
		Coffe
	</li>
	<li class="active">
		Juice
	</li>
</ul>

Tea
Its hot
Beer
Tasty but expensive
Coffe
Juice

Action list

1.22

Action lists are used for list where the user can perform actions. These can have several options attached to them in a so called leave-behind, however, these options may only effect the list item they are a part of. Individual options can have a tooltip and an icon and they are displayed only if the item is hovered or clicked.

Broad actions on the list (such as creating a new item or removing all) should be placed in the panel actions (see containers, chapter).

-

Show Hide markup


                              <ul class="wfm-list">
	<li ng-click="listSelected1 = !listSelected1">
		<span class="list-item-container">
			List item with one action in leave-behind
		</span>
		<span ng-cloak ng-show="listSelected1" class="list-dot grow-out"><b class="mdi mdi-check list-mark"></b></span>
		<div class="wfm-leave-behind wfm-leave-behind-1">
			<span>
				<i class="mdi mdi-delete"></i>
			</span>
		</div>
	</li>
	<li ng-click="listSelected2 = !listSelected2">
		<span class="list-item-container">
			List item with two actions in leave-behind
		</span>
		<span ng-cloak ng-show="listSelected2" class="list-dot grow-out"><b class="mdi mdi-check list-mark"></b></span>
		<div class="wfm-leave-behind wfm-leave-behind-2">
			<span>
				<i class="mdi mdi-pencil"></i>
				<i class="mdi mdi-delete"></i>
			</span>
		</div>
	</li>
	<li ng-click="listSelected3 = !listSelected3">
		<span class="list-item-container">
			List item with three actions in leave-behind
		</span>
		<span ng-cloak ng-show="listSelected3" class="list-dot grow-out"><b class="mdi mdi-check list-mark"></b></span>
		<div class="wfm-leave-behind">
			<span>
				<i class="mdi mdi-content-copy"></i>
				<i class="mdi mdi-pencil"></i>
				<i class="mdi mdi-delete"></i>
			</span>
		</div>
	</li>
	<li ng-click="listSelected4 = !listSelected4" class="disabled">
		<span class="list-item-container">
			Disabled list items without leave-behind
		</span>
		<span ng-cloak ng-show="listSelected4" class="list-dot grow-out"><b class="mdi mdi-check list-mark"></b></span>
		<div class="wfm-leave-behind">
			<span>
				<i class="mdi mdi-content-copy"></i>
				<i class="mdi mdi-pencil"></i>
				<i class="mdi mdi-delete"></i>
			</span>
		</div>
	</li>
</ul>

List item with one action in leave-behind
List item with two actions in leave-behind
List item with three actions in leave-behind
Disabled list items without leave-behind

Modal

1.23

A modal is launched above the main view and stays there until the user has taken action. It can be quickly dismissed by clicking outside it or on the close icon (this should be treated as a cancel).

Note: In all modals, dialogs and panels the footer links should be buttons, not <a/> tags.

Show Hide JavaScript


      
$scope.modalShown = false;
$scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
};

-

Show Hide markup


                              <button ng-click='toggleModal()' class="wfm-btn wfm-btn-default">Open modal</button>
<modal-dialog show='modalShown' ng-cloak>
	<h1 class="modal-title">Modal title</h1>
	<div class="modal-inner-content">
		Ladies and gentlemen, allow me to introduce myself, I am the amazing modal window body!
	</div>
	<div class="modal-actions">
		<aside>
			<button class="wfm-btn wfm-btn-invis-primary" ng-click="toggleModal()">Ok</button>
		</aside>
	</div>
</modal-dialog>

Dialog

1.24

The dialog is used for confirmation. As opposed to the modal it can not be dissmissed without taking an action.

Note: In all modals, dialogs and panels the footer links should be buttons, not <a/> tags.

Note: Recomended translated text { {'AreYouSureYouWantToDelete' | translate} }

-

Show Hide markup


                              <button ng-click='confirmModal1=true' class="wfm-btn wfm-btn-default">Do something dangerous</button>
<div ng-cloak class="modal-box">
	<div ng-cloak ng-show="confirmModal1">
		<div class="modalbg">
			<div class="dialog-mini material-depth-1">
				<div class="modal-inner-content">
					<h3>Affected item(s)</h3>
					Are you sure you want to delete?
				</div>
				<div class="modal-actions">
					<aside>
						<button ng-click="confirmModal1=false" class="wfm-btn wfm-btn-invis-default">Yes</button>
						<button ng-click="confirmModal1=false" class="wfm-btn wfm-btn-invis-primary">No</button>
					</aside>
				</div>
			</div>
		</div>
	</div>
</div>

Table

1.25

Tables are used to give a overview of data, however, following the Main concepts of the styleguide, only relevant data should be displayed. In the cases where that is not possible, please use infinite scrolling or pagination to keep the page lightweight. If a table does take time to be loaded, a spinner should be displayed during this time to indicate to the user that it will take some time and that the table is not broken.

A table should be displayed in alphabetical order by default, unless there is an obvious way the user would want the data sorted. Even so, the ability to sort and search within the table is most welcome. If the table can be sorted, it should have filled arrows in the header indicating the sorting direction (down for descending and up for ascending), clicking the header should change the sorting direction and the arrow direction.

Cells containing numbers are right aligned using the 'number-cell' class to differentiate them from text content.
If you need to display bigger forms of data or need more complex actions such as importing/exporting, multi select or the ability to hide columns - take a look at the Big table.

-

Show Hide markup


                              <table class="wfm-table">
	<thead>
		<tr>
			<th>texts</th>
			<th>numbers</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>text1</td>
			<td class="number-cell">2135847</td>
		</tr>
		<tr>
			<td>text1</td>
			<td class="number-cell">2.3546</td>
		</tr>
	</tbody>
</table>

texts	numbers
text1	2135847
text1	2.3546

Two dimensional table

1.26

-

Show Hide markup


                              <table class="wfm-table wfm-table-multi">
	<thead>
		<tr>
			<th></th>
			<th>column header</th>
			<th>column header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>row header</td>
			<td>item1</td>
			<td>item2</td>
		</tr>
		<tr>
			<td>row header</td>
			<td>item3</td>
			<td>item4</td>
		</tr>
	</tbody>
</table>

	column header	column header
row header	item1	item2
row header	item3	item4

Big table

1.27

The big table is used to give data more space and actions. Check out the documentation to see all available functions. Remember to translate the table menu items using ui-i18n

Show Hide JavaScript


      
var data = [];
for (var i = 0; i < 100; i++) {
    data[i] = {};
    for (var j = 0; j < 10; j++) {
            data[i]['j' + j] = j;
    }
}
$scope.gridLang = 'en';
$scope.gridOptions = {

    exporterCsvFilename: 'myFile.csv',
    exporterOlderExcelCompatibility: true,
    exporterMenuPdf: false,
    enableSelectAll: true,
    enableFullRowSelection: true,
    enableRowHeaderSelection: true,
    enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
    selectionRowHeaderWidth: 35,
    data: data,
};
$scope.gridOptions.enableGridMenu = true;

-

Show Hide markup


                              <div ui-i18n="gridLang" class="big-table-wrapper">
  <div ui-grid="gridOptions" ui-grid-exporter ui-grid-auto-resize ui-grid-selection ui-grid-disable-animation class="myGrid"></div>
</div>

Progress bar

1.28

The loading bar is displayed at the top of the ui-view. If the process can be estimated or calculated we show the linear bar. Otherwise we use an indeterminite bar.

-

Show Hide markup


                              <md-progress-linear md-mode="buffer" value="45" md-buffer-value="45"></md-progress-linear>
<div class="wfm-block material-depth-1"> 45%</div>
</br>
<md-progress-linear md-mode="indeterminate"></md-progress-linear>
<div class="wfm-block material-depth-1"> Loading...</div>

45%

Loading...

Spinner

1.29

The spinner is used to indicate automatic loading in big elements such as tables, lists and views.

-

Show Hide markup


                              <md-progress-circular md-mode="indeterminate"></md-progress-circular>

Tooltip

1.30

Tooltips should be added wherever more information is needed. Keep the text short and clear as to not obstruct other elements on smaller screens.

-

Show Hide markup


                              <button class="wfm-btn wfm-btn-default"> Tip
	<md-tooltip>
		Refresh
	</md-tooltip>
</button>
<i class="action-icon mdi mdi-duck ">
	<md-tooltip>
		Refresh
	</md-tooltip>
</i>

Chips

1.31

Chips are used to build horizontal lists of items. They consists of an indicator and a string to give more information. The indicator can have warning classes to show severity or a short category text.

-

Show Hide markup


                              <div class="wfm-chip-wrap">
  <span class="wfm-chip">
    <span class="chip-handle">
      Size
    </span>
    <span class="chip-text">Small</span>
  </span>
</div>

<div class="wfm-chip-wrap">
  <span class="wfm-chip">
    <span class="chip-handle">
      <i class="mdi mdi-alert-circle"></i>
    </span>
    <span class="chip-text">Medium</span>
  </span>
</div>

<div class="wfm-chip-wrap">
  <span class="wfm-chip">
    <span class="chip-handle chip-success">
      <i class="mdi mdi-thumb-up"></i>
    </span>
    <span class="chip-text">Large</span>
  </span>
</div>

<div class="wfm-chip-wrap">
  <span class="wfm-chip">
    <span class="chip-handle chip-warning">
      <i class="mdi mdi-alert"></i>
    </span>
    <span class="chip-text">Insane</span>
  </span>
</div>

  <div class="wfm-chip-wrap">
    <span class="wfm-chip">
      <span class="chip-handle chip-error">
        <i class="mdi mdi-alert-octagon"></i>
      </span>
      <span class="chip-text">Infinite</span>
    </span>
  </div>

Size Small

Medium

Large

Insane

Infinite

Chips with filter

1.32

Chips can be tied to a filter to hide or show them accordingly. It is possible to reverse the filter so that it filters in matches instead of out unmatched to save space.

Note: The ng-bind is for styleguide demo purpose only, use { {item.Name} } in the project.

-

Show Hide markup


                              <label for="chip-filter" class="input-icon">
 <i class="mdi mdi-filter-outline">
   <input type="text" id="chip-filter" ng-model="chipFilter" placeholder="Filter chips">
   <md-tooltip>Filter</md-tooltip>
 </i>
</label>
</br>
<div class="wfm-chip-wrap" ng-repeat="item in sizes | filter: chipFilter">
  <span class="wfm-chip">
    <span class="chip-handle">
      <span ng-bind="item.Type">Dont use ng-bind here.</span>
    </span>
    <span class="chip-text">
      <span ng-bind="item.Name">Dont use ng-bind here'</span>
    </span>
  </span>
</div>

Dont use ng-bind here. Dont use ng-bind here'

Badge

1.33

Badges are used to show the size of a group of items. It can show a fixed number or tick up as the user add more items to the group. By using colors we can indicate the status or severity of that amount. Badges can be applied to a number of containers as well, such as panels and tabs.

Attribute Name	Usage
badge-model	Bind the number to show
status	notice-info/notice-error/notice-warning/notice-success
pulse	true/false - if the badge should pulse on change
show-empty	true/false - if the badge should appear even if the badge-model is undefined

-

Show Hide markup


                               <a href="#" ng-click="counterX = counterX+1" class="wfm-btn wfm-btn-primary wfm-badge-wrapper">
   <i class="mdi mdi-cake "></i>
   <wfm-badge badge-model="counterX" pulse="true" show-empty="true" status="'notice-info'"> </wfm-badge>
 </a>
 <a href="#" ng-click="counterY = counterY+1" class="wfm-btn wfm-btn-default wfm-badge-wrapper">
   <i class="mdi mdi-cake "></i>
   <wfm-badge badge-model="counterY" pulse="true" show-empty="false" status="'notice-warning'"> </wfm-badge>
 </a>
 <a href="#" ng-click="counterZ = counterZ+1" class="wfm-btn wfm-btn-default wfm-badge-wrapper">
   <i class="mdi mdi-cake "></i>
   <wfm-badge badge-model="counterZ" pulse="true" show-empty="false" status="'notice-success'"> </wfm-badge>
 </a>
 <div tabindex=0 class="context-menu card-context wfm-badge-wrapper">
   <i class="mdi mdi-cake"></i>
   <wfm-badge badge-model="999" status="'notice-error'"> </wfm-badge>
   <md-tooltip>Options</md-tooltip>
 </div>

With fab and description

First header title

With only fab

Second header title

Without fab and desc

Third header title

Simple ()

Repeated ()

Simple

Repeated

Simple

Color

Loading

Toggle

Raised

Flat

View header

Panel header

Text header

Button menu trigger:

Icon menu trigger:

Menu with keyboard shortcuts:

Popup Title

Modal title

Affected item(s)