<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.fab-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 fabToolbardemoBasicUsage"> <p> You can use the fabToolbar with a trigger and regular toolbar. </p> <p> You may use the <code>md-open</code> attribute to programmatically control whether or not the control is open, and you may add a class of <code>md-left</code> or <code>md-right</code> to control the position of the trigger and toolbar tools. </p> <md-fab-toolbar md-open="demo.isOpen" count="demo.count" md-direction="{{demo.selectedDirection}}"> <md-fab-trigger class="align-with-text"> <md-button aria-label="menu" class="md-fab md-primary"> <md-icon md-font-icon="zmdi zmdi-menu"></md-icon> </md-button> </md-fab-trigger> <md-toolbar> <md-fab-actions class="md-toolbar-tools"> <md-button aria-label="comment" class="md-icon-button"> <md-icon md-font-icon="zmdi zmdi-comment"></md-icon> </md-button> <md-button aria-label="label" class="md-icon-button"> <md-icon md-font-icon="zmdi zmdi-label"></md-icon> </md-button> <md-button aria-label="photo" class="md-icon-button"> <md-icon md-font-icon="zmdi zmdi-image"></md-icon> </md-button> </md-fab-actions> </md-toolbar> </md-fab-toolbar> <md-content class="md-padding" layout="column"> <div layout="row" layout-align="space-around"> <div layout="column"> <b>Open/Closed</b> <md-radio-group ng-model="demo.isOpen"> <md-radio-button ng-value="true">Open</md-radio-button> <md-radio-button ng-value="false">Closed</md-radio-button> </md-radio-group> </div> <div layout="column"> <b>Direction</b> <md-radio-group ng-model="demo.selectedDirection"> <md-radio-button ng-value="'left'">Left</md-radio-button> <md-radio-button ng-value="'right'">Right</md-radio-button> </md-radio-group> </div> </div> </md-content> </md-content> </section> </div> </div> <!-- /page content --> </div>