<div class="page page-material"> <!-- page header --> <div class="pageheader"> <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2> <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a> </li> <li> <a href="javascript:;">Material UI</a> </li> <li> <a ui-sref="app.material.toolbar">{{page.title}}</a> </li> </ul> </div> </div> <!-- /page header --> <!-- page content --> <div class="pagecontent"> <div flex layout="column"> <section class="demo-container md-whiteframe-z1"> <md-toolbar> <div class="md-toolbar-tools"> <md-button class="md-icon-button" aria-label="Settings"> <md-icon md-font-icon="zmdi zmdi-menu"></md-icon> </md-button> <h2> <span>Basic Usage</span> </h2> <span flex></span> <md-menu md-position-mode="target-right target"> <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()"> <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon> </md-button> <md-menu-content width="4"> <md-menu-item ng-repeat="item in [1, 2, 3]"> <md-button> Option {{item}} </md-button> </md-menu-item> </md-menu-content> </md-menu> </div> </md-toolbar> <md-content class="md-padding toolbardemoBasicUsage"> <md-toolbar> <div class="md-toolbar-tools"> <md-button class="md-icon-button" aria-label="Settings"> <md-icon md-font-icon="zmdi zmdi-menu"></md-icon> </md-button> <h2> <span>Toolbar with Icon Buttons</span> </h2> <span flex></span> <md-button class="md-icon-button" aria-label="Favorite"> <md-icon md-font-icon="zmdi zmdi-favorite" style="color: greenyellow"></md-icon> </md-button> <md-button class="md-icon-button" aria-label="More"> <md-icon md-font-icon="zmdi zmdi-more-vert"></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 md-toolbar-tools-bottom"> <span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span> </h2> </md-toolbar> </md-content> </section> <section class="demo-container md-whiteframe-z1"> <md-toolbar> <div class="md-toolbar-tools"> <md-button class="md-icon-button" aria-label="Settings"> <md-icon md-font-icon="zmdi zmdi-menu"></md-icon> </md-button> <h2> <span>Scroll Shrink</span> </h2> <span flex></span> <md-menu md-position-mode="target-right target"> <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()"> <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon> </md-button> <md-menu-content width="4"> <md-menu-item ng-repeat="item in [1, 2, 3]"> <md-button> Option {{item}} </md-button> </md-menu-item> </md-menu-content> </md-menu> </div> </md-toolbar> <div layout="column" class="toolbardemoScrollShrink" style="height:600px"> <md-toolbar md-scroll-shrink> <div class="md-toolbar-tools"> <h3> <span>My App Title</span> </h3> </div> </md-toolbar> <md-content flex> <md-list> <md-list-item class="md-3-line" ng-repeat="item in todos"> <img ng-src="{{item.face}}" alt="{{item.who}}" class="md-avatar"> <div class="md-list-item-text"> <h3>{{item.what}}</h3> <h4>{{item.who}}</h4> <p> {{item.notes}} </p> </div> <md-divider inset></md-divider> </md-list-item> </md-list> </md-content> </div> </section> </div> </div> <!-- /page content --> </div>