Tutorialsplane

Angular Material Fab Toolbar


Angular Material Fab Toolbar : Angular Material Provides <md-fab-toolbar> directive which represents the toolbar of elements(Basically <md-button>). It provides the quick access for common actions. It is very simple to create Angular Material Fab toolbar. Here in this tutorial we are going to explain how you can create fab toolbar. You can also use our online editor to edit and run the code online.


Angular Material Fab Toolbar Example

Let us first create a simple Fab toolbar using <md-fab-toolbar> directive-

Angular Material Fab Toolbar Example:

<md-fab-toolbar md-direction="left">
  <md-fab-trigger class="align-with-text">
    <md-button aria-label="Menu" class="md-fab md-primary"><i class="material-icons">line_weight</i></md-button>
  </md-fab-trigger>

   <md-toolbar>
      <md-fab-actions class="md-toolbar-tools">
        <md-button aria-label="comment" class="md-icon-button">
          <i class="material-icons">backup</i>
        </md-button>
        <md-button aria-label="label" class="md-icon-button">
         <i class="material-icons">edit</i>
        </md-button>
        <md-button aria-label="photo" class="md-icon-button">
          <i class="material-icons">delete</i>
        </md-button>
      </md-fab-actions>
    </md-toolbar>
</md-fab-toolbar>

Try It On →

If You run the above example it will produce the output something like this-

Fab Toolbar Set Direction

Following directions are available for Fab Toolbar –

Fab Toolbar Trigger Position

If you want to set the trigger position for the Fab toolbar following options are available which you can use easily as per your need, Just add the class to <md-fab-toolbar>-

Example

Let us create a simple example for Trigger positions –

Fab Trigger positions Example:

<md-fab-toolbar class="md-fab-top-left">
....
</md-fab-toolbar>
<md-fab-toolbar class="md-fab-top-right">
....
</md-fab-toolbar>
<md-fab-toolbar class="md-fab-bottom-left">
....
</md-fab-toolbar>
<md-fab-toolbar class="md-fab-bottom-right">
....
</md-fab-toolbar>

Learn Angular Material