<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>
