Angular Material Fab-Toolbar

<Md-fab-toolbar> is an Angular directive which contains headers, titles, or functions.

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

In Fab-toolbar the md-open attributes is used to control the program. In Fab-Toolbar we have to set the visible direction by using the toolbar md-direction. The component supports left options.

Attributes

The table lists out the description of attributes of the md-Fab toolbar.

Sr.No	Parameter	Description
1	*md-direction	md-direction is determined by the direction where the toolbar item will appear to the trigger element. It supports left or right directions of toolbar.
2	md-open	md-open controls the toolbar which is visible or not.

Single row

A toolbar is placed at the top of the application and contain a single line containing the title of the application.

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

Multiple rows

The toolbar contain multiple rows at a time. To creating toolbars with multiple rows in Angular content is placing <mat-toolbar-row> elements inside the <mat-toolbar>.

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

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

Positioning Toolbar Content

The toolbar does not display state of the contents. It gives the full power to the position of the content to the user.

It is accomplished with demonstration:

<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

It shows the md-fab-toolbar directive and its uses.

am_fabtoolbar.html

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