@ecodev/fab-speed-dial

[![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 in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@ecodev/fab-speed-dial
87411.0.04 months ago5 years agoMinified + gzip package size for @ecodev/fab-speed-dial in KB

Readme

Angular Material FAB speed dial
Build Status Total Downloads Latest Stable Version License Join the chat at https://gitter.im/Ecodev/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:
```bash
yarn add @ecodev/fab-speed-dial
```
  1. In app.module.ts add the following modules to the imports array:
- `MatButtonModule`
- `MatIconModule`
- `EcoFabSpeedDialModule`

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>menu</mat-icon></button>
  </eco-fab-speed-dial-trigger>

  <eco-fab-speed-dial-actions>
    <button mat-mini-fab (click)="doAction('action1')"><mat-icon>add</mat-icon></button>
    <button mat-mini-fab (click)="doAction('action2')"><mat-icon>edit</mat-icon></button>
    <button mat-mini-fab (click)="doAction('action3')"><mat-icon>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 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.