angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
64 lines (48 loc) • 1.8 kB
HTML
<div ng-controller="AppCtrl" ng-cloak>
<md-content>
<br>
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<h2 flex md-truncate>Toolbar with Disabled/Enabled Icon Buttons</h2>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="More">
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<br>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button aria-label="Go Back">
Go Back
</md-button>
<md-truncate style="position: absolute; left: 90px; right: 170px; top: 13px; bottom: 13px;">Toolbar with Standard Buttons</md-truncate>
<span flex></span>
<md-button class="md-raised" aria-label="Learn More">
Learn More
</md-button>
<md-button class="md-fab md-mini" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<br>
<md-toolbar class="md-tall md-accent">
<h2 class="md-toolbar-tools">
<span>Toolbar: tall (md-accent)</span>
</h2>
</md-toolbar>
<br>
<md-toolbar class="md-tall md-warn md-hue-3">
<span flex></span>
<h2 class="md-toolbar-tools">
<span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
</h2>
</md-toolbar>
</md-content>
</div>