Nineties Party Mix

    @ecodev/fab-speed-dial
    TypeScript icon, indicating that this package has built-in type declarations

    11.0.0 • Public • Published

    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:
      yarn add @ecodev/fab-speed-dial
    2. 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.

    Keywords

    none

    Install

    npm i @ecodev/fab-speed-dial

    DownloadsWeekly Downloads

    2,031

    Version

    11.0.0

    License

    MIT

    Unpacked Size

    153 kB

    Total Files

    14

    Last publish

    Collaborators

    • powerkiki
    • sbaptista
    • stissot