Angular Material FAB speed dial

This is a FAB speed dial component for Angular Material.

See the component in action on the demo page.

Install

1. Install the library:

   yarn add @ecodev/fab-speed-dial

2. In your standalone components add the following to the imports array:
   • EcoFabSpeedDialComponent
   • EcoFabSpeedDialTriggerComponent
   • EcoFabSpeedDialActionsComponent
   • MatButtonModule

Usage

The following is an example of a minimal template. Either implement a doAction(), or adapt the bindings to your needs:

<eco-fab-speed-dial>
  <eco-fab-speed-dial-trigger>
    <button mat-fab (click)="doAction('trigger')"><mat-icon fontIcon="menu" /></button>
  </eco-fab-speed-dial-trigger>

  <eco-fab-speed-dial-actions>
    <button mat-mini-fab (click)="doAction('action1')"><mat-icon fontIcon="add" /></button>
    <button mat-mini-fab (click)="doAction('action2')"><mat-icon fontIcon="edit" /></button>
    <button mat-mini-fab (click)="doAction('action3')"><mat-icon fontIcon="search" /></button>
  </eco-fab-speed-dial-actions>
</eco-fab-speed-dial>

Properties

eco-fab-speed-dial

Property	Type	Default	Description
open	boolean	false	Indicates if this FAB Speed Dial is opened
direction	up, down, left or right	up	The direction to open the action buttons

eco-fab-speed-dial-trigger

Property	Type	Default	Description
spin	boolean	false	Enables the rotation of the trigger action when the speed dial is opening

Additionally to spin property, add class "spin180" or "spin360" on html content inside of eco-fab-speed-dial-trigger tag to activate rotation on a specific element.

In case of buttons, the icon should rotate not the whole button (box-shadow would rotate too).

Development

The most useful commands for development are:

• yarn dev to start a development server
• yarn build-demo to build the demo locally (it will be published automatically by GitHub Actions)
• git tag -a 1.2.3 && git push to publish the lib to npm (via GitHub Actions release job)

Prior work

This lib was originally based on angular-smd, and its various forks, itself based on AngularJS FAB Speed Dial.