Angular Material Fab Speed Dial

admin

8 years ago

Angular Material Fab Speed Dial:<md-fab-speed-dial> directive is used to create fab speed dial in Angular Material. Speed dial basically represents the series of popup elements which provides the quick access for most common actions/tasks. Here in this tutorial we are going to explain how you can create Fab Speed Dial in Angular Material. You Can also use our online editor to edit and run the code online.

Angular Material Fab Speed Dial Example

Let us first create very basic Fab Speed Dial-

Angular Material Fab Speed Dial Example:

 <md-fab-speed-dial md-direction="up" class="md-fling">
<md-fab-trigger>
          <md-button aria-label="menu" class="md-fab md-warn">
           <i class="material-icons">line_weight</i>
          </md-button>
        </md-fab-trigger>

  <md-fab-actions>
    <md-button class="md-fab" aria-label="Add User">
      <i class="material-icons">account_circle</i>
    </md-button>

    <md-button class="md-fab" aria-label="Add Group">
      <i class="material-icons">group_work</i>
    </md-button>
  </md-fab-actions>
</md-fab-speed-dial>

Try It On →

This is the very basic fab speed dial. If you run the above example it will produce output something like this –

Add Animation to Fab Speed Dial

Two animations(classes) are available for Fab Speed Dial.

md-fling: The speed dial items will appear underneath the trigger button.
md-scale: The speed dial items will scale 0% to 100% and will be placed at their appropriate position.

Let Us create an example to understand the both animations.

Fab Speed Dial Animation Example

Add animation classes – md-fling, md-scale to the directive md-fab-speed-dial. Here is an example of both animations –

md-fling | md-scale | Animation | Example:

<h3>md-fling Animation Example</h3>
  <md-fab-speed-dial md-direction="up" class="md-fling">
  <md-fab-trigger>
    <md-button aria-label="Add..." class="md-fab md-warn"><i class="material-icons">line_weight</i></md-button>
  </md-fab-trigger>

  <md-fab-actions>
    <md-button aria-label="Add User">
      <i class="material-icons">account_circle</i>
    </md-button>

    <md-button aria-label="Add Group">
      <i class="material-icons">group_work</i>
    </md-button>
  </md-fab-actions>
</md-fab-speed-dial>
<h3>md-scale Example</h3>
  <md-fab-speed-dial md-direction="up" class="md-scale">
  <md-fab-trigger>
    <md-button aria-label="Add..." class="md-fab md-warn"><i class="material-icons">line_weight</i></md-button>
  </md-fab-trigger>

  <md-fab-actions>
    <md-button aria-label="Add User">
      <i class="material-icons">account_circle</i>
    </md-button>

    <md-button aria-label="Add Group">
      <i class="material-icons">group_work</i>
    </md-button>
  </md-fab-actions>
</md-fab-speed-dial>

Try It On →

Add Position Of Trigger

You can easily assign the trigger button position using the inbuilt classes. The following positions are available let us go one by one.

Top Left Position(md-fab-top-left): Add class md-fab-top-left to the :<md-fab-speed-dial> for top left position.
```
 
<md-fab-speed-dial class="md-fab-top-left">..</md-fab-speed-dial>
```
Top Right Position(md-fab-top-right): Add class md-fab-top-right to the :<md-fab-speed-dial> for top right position.
```
 
<md-fab-speed-dial class="md-fab-top-right">..</md-fab-speed-dial>
```
Bottom Right Position(md-fab-bottom-right): Add class md-fab-bottom-right to the :<md-fab-speed-dial> for bottom right position.
```
 
<md-fab-speed-dial class="md-fab-bottom-right">..</md-fab-speed-dial>
```
Bottom Left Position(md-fab-bottom-left): Add class md-fab-bottom-left to the :<md-fab-speed-dial> for bottom left position.
```
 
<md-fab-speed-dial class="md-fab-bottom-left">..</md-fab-speed-dial>
```

Set Direction

You can set the direction for items(direction in which speed dial appear relative to trigger button) using the attribute md-direction. Following Options are available.

Speed Dial Direction Up:
Use md-direction=”up” for direction up.
Speed Dial Direction Down:
Use md-direction=”down” for direction down.
Speed Dial Direction Left:
Use md-direction=”left” for direction left.
Speed Dial Direction Right:
Use md-direction=”right” for direction right.

Now let us create an example to understand how these four directions works –

Fab Speed Dial Direction Example:

  <md-fab-speed-dial md-direction="up" class="md-fling">
   ....
  </md-fab-speed-dial>
  <md-fab-speed-dial md-direction="down" class="md-fling">
   ....
  </md-fab-speed-dial>
  <md-fab-speed-dial md-direction="left" class="md-fling">
   ....
  </md-fab-speed-dial>

  <md-fab-speed-dial md-direction="right" class="md-fling">
   ....
  </md-fab-speed-dial>

Try It On →