Angular Material Feb-Toolbar

The <md-fab-toolbar> is an Angular directive contains the headers, titles, or actions.

It is used to show the toolbar of elements or buttons for quick use of common functions. You can use the tab toolbar with a trigger.

You can use the md-open attribute to control the program openly. You can set the direction that appears using the toolbar md-direction quality. This component currently supports left and appropriate options.

Attributes

The below table lists out the description of many attributes of the md-fab-toolbar.

Sr.No	Parameter	Description
1	*md-direction	It determines from the direction where the toolbar items will appear relative to the trigger element. It supports left or right directions.
2	md-open	It controls programmatically whether or not the toolbar is visible.

Single row

In most cases, a toolbar will be placed at the top of your application and will contain only a single line that contains the title of your application.

<mat-toolbar>
  <span>My Application</span>
</mat-toolbar>

Multiple rows

Material design specifications describe that the toolbar may also contain multiple rows. Creating toolbars with multiple rows in angular content is done by placing <mat-toolbar-row> elements inside <mat-toolbar>.

<mat-toolbar-row>
  <span>Custom Toolbar</span>
</mat-toolbar-row>

Note: Placing content outside a <mat-toolbar-row> where multiple rows are specified is not supported.

Positioning toolbar content

The toolbar does not display any status of its content. It gives the user full power to position the content as it suits their application.

It can be easily accomplished with performance:

<mat-toolbar-row>
  <span>Second Line</span>
  <span class="example-spacer"></span>
  <mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
</mat-toolbar-row>
content_copy
.example-spacer {
  flex: 1 1 auto;
}

Example

The example shows the use of�md-fab-toolbar�directive and the uses of toolbar.

am_fabtoolbar.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('toolbarController', toolbarController);
         function toolbarController ($scope) {
            $scope.isOpen = false;
            $scope.count = 0;
            $scope.selectedDirection = 'left';          
         }                 
      </script>      
   </head>
   <body ng-app = "firstApplication"> 
      <div id = "toolbarContainer" ng-controller = "toolbarController as ctrl" ng-cloak>
         <md-fab-toolbar md-open = "ctrl.isOpen" md-direction = "{{ctrl.selectedDirection}}"
            count = "ctrl.count">
            <md-fab-trigger class = "align-with-text">
               <md-button aria-label = "menu" class = "md-fab md-primary">
                  <md-icon class = "material-icons">menu</md-icon>
               </md-button>
            </md-fab-trigger>
            <md-toolbar>
               <md-fab-actions class = "md-toolbar-tools">
                  <md-button aria-label = "Add" class = "md-fab md-raised md-mini
                     md-accent">
                     <md-icon class = "material-icons" aria-label = "Add">add</md-icon>
                  </md-button>
                  <md-button aria-label = "Insert Link" class = "md-fab md-raised
                     md-mini md-accent">
                     <md-icon class = "material-icons" aria-label = "Insert Link">
                        insert_link</md-icon>
                  </md-button>
                  <md-button aria-label = "Edit" class = "md-fab md-raised md-mini
                     md-accent">
                     <md-icon class = "material-icons" aria-label = "Edit">
                        mode_edit</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 = "ctrl.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 = "ctrl.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>
      </div>
   </body>
</html>

Output: