Angular Reference

Directives

Appbar

<mui-appbar />

Button

<mui-button />
  * {String} color=default|primary|danger|accent
  * {String} variant=default|flat|raised|fab
  * {String} size=default|small|large
  * {Boolean} disabled=false|true
  * {NgExpression} ng-disabled

Caret

<mui-caret />

Checkbox

<mui-checkbox />
  * {String} label
  * {String} name
  * {String} value
  * {Boolean} checked=false|true
  * {Boolean} disabled=false|true
  * {NgExpression} ng-disabled
  * {NgString} ng-model

Container

<mui-container />
  * {Boolean} fluid=false|true

Divider

<mui-divider />

Dropdown Component

Dropdown

<mui-dropdown />
  * {String} label
  * {String} color=default|primary|accent
  * {String} size=default|small|large
  * {String} variant=default|flat|raised|fab
  * {Boolean} disabled=false|true
  * {Boolean} open=false|true
  * {Boolean} right-align=false|true

Dropdown-Item

<mui-dropdown-item />
  * {String} link

Form

<form />
  * {Boolean} mui-form-inline=false|true

Grid

Row

<mui-row />

Col

<mui-col />
  * {Integer} xs
  * {Integer} xs-offset
  * {Integer} sm
  * {Integer} sm-offset
  * {Integer} md
  * {Integer} md-offset
  * {Integer} lg
  * {Integer} lg-offset
  * {Integer} xl
  * {Integer} xl-offset

Input

<mui-input />
  * {String} hint
  * {String} label
  * {String} type=text|email|url|tel|password
  * {Boolean} autofocus=false|true
  * {Boolean} float-label=false|true
  * {Boolean} invalid=false|true
  * {Boolean} required=false|true
  * {NgExpression} ng-disabled
  * {NgString} ng-model

Panel

<mui-panel />

Radio

<mui-radio />
  * {String} label
  * {String} name
  * {String} value
  * {Boolean} checked=false|true
  * {Boolean} disabled=false|true
  * {NgExpression} ng-disabled
  * {NgString} ng-model

Select Component

Select

<mui-select />
  * {String} label
  * {String} name
  * {Boolean} use-default=false|true
  * {NgExpression} ng-disabled
  * {NgString} ng-model

Option

<mui-option />
  * {String} label
  * {String} value

Tabs Component

Tabs

<mui-tabs />
  * {NgExpression} onChange
  * {NgExpression} selected
  * {Boolean} justified=false|true

Tab

<mui-tab />
  * {String} label
  * {NgExpression} onSelect
  * {NgExpression} onDeselect
  * {Boolean} active=false|true

Textarea

<mui-textarea />
  * {String} hint
  * {String} label
  * {Integer} rows
  * {Boolean} autofocus=false|true
  * {Boolean} float-label=false|true
  * {Boolean} invalid=false|true
  * {Boolean} required=false|true
  * {NgExpression} ng-disabled
  * {NgString} ng-model

CSS Helpers

<!-- animation -->
<div class="mui--no-transition"></div>

<!-- alignment -->
<div class="mui--text-left"></div>
<div class="mui--text-right"></div>
<div class="mui--text-center"></div>
<div class="mui--text-justify"></div>
<div class="mui--text-nowrap"></div>
<div class="mui--align-baseline"></div>
<div class="mui--align-top"></div>
<div class="mui--align-middle"></div>
<div class="mui--align-bottom"></div>

<!-- depth helpers -->
<div class="mui--z1"></div>
<div class="mui--z2"></div>
<div class="mui--z3"></div>
<div class="mui--z4"></div>
<div class="mui--z5"></div>

<!-- float helpers -->
<div class="mui--clearfix"></div>
<div class="mui--pull-right"></div>
<div class="mui--pull-left"></div>

<!-- toggle helpers -->
<div class="mui--hide"></div>
<div class="mui--show"></div>
<div class="mui--invisible"></div>
<div class="mui--overflow-hidden"></div>

<!-- responsive utilities -->
<div class="mui--visible-xs-block"></div>
<div class="mui--visible-xs-inline"></div>
<div class="mui--visible-xs-inline-block"></div>
<div class="mui--visible-sm-block"></div>
<div class="mui--visible-sm-inline"></div>
<div class="mui--visible-sm-inline-block"></div>
<div class="mui--visible-md-block"></div>
<div class="mui--visible-md-inline"></div>
<div class="mui--visible-md-inline-block"></div>
<div class="mui--visible-lg-block"></div>
<div class="mui--visible-lg-inline"></div>
<div class="mui--visible-lg-inline-block"></div>
<div class="mui--hidden-xs"></div>
<div class="mui--hidden-sm"></div>
<div class="mui--hidden-md"></div>
<div class="mui--hidden-lg"></div>

<!-- typograpy -->
<div class="mui--text-display4"></div>
<div class="mui--text-display3"></div>
<div class="mui--text-display2"></div>
<div class="mui--text-display1"></div>
<div class="mui--text-headline"></div>
<div class="mui--text-title"></div>
<div class="mui--text-subhead"></div>
<div class="mui--text-body2">Body2</div>
<div class="mui--text-body1">Body1</div>
<div class="mui--text-caption">Caption</div>
<div class="mui--text-menu">Menu</div>
<div class="mui--text-button">Button</div>

<!-- text color -->
<div class="mui--text-dark"></div>
<div class="mui--text-dark-secondary"></div>
<div class="mui--text-dark-hint"></div>
<div class="mui--text-light"></div>
<div class="mui--text-light-secondary"></div>
<div class="mui--text-light-hint"></div>
<div class="mui--text-accent"></div>
<div class="mui--text-accent-secondary"></div>
<div class="mui--text-accent-hint"></div>
<div class="mui--text-danger"></div>
<div class="mui--text-black"></div>
<div class="mui--text-white"></div>

<!-- user select -->
<div class="mui--no-user-select"></div>

<!-- appbar dimension helpers -->
<div class="mui--appbar-height"></div>
<div class="mui--appbar-min-height"></div>
<div class="mui--appbar-line-height"></div>

<!-- list helpers -->
<ul class="mui-list--unstyled"></ul>
<ul class="mui-list--inline"></ul>
« Previous Next »