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-

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

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 Direction Left(md-direction=”left”): – md-direction=”left” is used to set the left direction for the Fab Toolbar.
• Fab Toolbar Direction Right(md-direction=”right”): – md-direction=”right” is used to set the right direction.

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

• Trigger Position Top Left(md-fab-top-left): – class=”md-fab-top-left” is used to add the top left position of trigger.
• Trigger Position Top Right(md-fab-top-right): – class=”md-fab-top-right” is used to add the top right position of trigger.
• Trigger Position Bottom Left(md-fab-bottom-left): – class=”md-fab-bottom-left” is used to add the bottom left position of trigger.
• Trigger Position Bottom Right(md-fab-bottom-right): – class=”md-fab-bottom-left” is used to add the bottom right position of trigger.

Example

Let us create a simple example for Trigger positions –

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