@ecodev/fab-speed-dial
v17.0.0
Published
[![Build Status](https://github.com/Ecodev/fab-speed-dial/workflows/main/badge.svg)](https://github.com/Ecodev/fab-speed-dial/actions) [![Total Downloads](https://img.shields.io/npm/dt/@ecodev/fab-speed-dial.svg)](https://www.npmjs.com/package/@ecodev/fab
Downloads
9,908
Readme
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
- Install the library:
yarn add @ecodev/fab-speed-dial
- In your standalone components add the following to the
imports
array:EcoFabSpeedDialComponent
EcoFabSpeedDialTriggerComponent
EcoFabSpeedDialActionsComponent
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"></mat-icon></button>
</eco-fab-speed-dial-trigger>
<eco-fab-speed-dial-actions>
<button mat-mini-fab (click)="doAction('action1')"><mat-icon fontIcon="add"></mat-icon></button>
<button mat-mini-fab (click)="doAction('action2')"><mat-icon fontIcon="edit"></mat-icon></button>
<button mat-mini-fab (click)="doAction('action3')"><mat-icon fontIcon="search"></mat-icon></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 |
| animationMode
| fling
or scale
| fling
| The animation to apply when opening the action buttons |
| fixed
| boolean
| false
| Indicates if this FAB Speed Dial is fixed (user cannot change the open state on click) |
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 serveryarn 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 Actionsrelease
job)
Prior work
This lib was originally based on angular-smd, and its various forks, itself based on AngularJS FAB Speed Dial.