Angular Speed Dial

Material FAB Speed Dial for Angular based on Jeferson Estevo's implementation.

Usage

Import the module NgxSpeedDialModule.

<ngx-speed-dial
    [animationMode]="animationMode"
    [direction]="direction"
    [fixed]="fixed"
    [(open)]="open"
>
    <ngx-speed-dial-trigger>
        <button mat-fab (click)="actionX()">
            <mat-icon>check</mat-icon>
        </button>
    </ngx-speed-dial-trigger>

    <ngx-speed-dial-actions>
        <button mat-mini-fab (click)="action1()">
            <mat-icon>add</mat-icon>
        </button>
        <button mat-mini-fab (click)="action2()">
            <mat-icon>edit</mat-icon>
        </button>
        <button mat-mini-fab (click)="action3()">
            <mat-icon>menu</mat-icon>
        </button>
    </ngx-speed-dial-actions>
</ngx-speed-dial>

Properties

ngx-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) | | forceTooltips | boolean | false | Indicates if button tooltips should be forced to remain open (useful on mobile) |

ngx-speed-dial-trigger

| Property | Type | Default | Description | | -------- | ------- | ------- | --------------------------------------------------------------------------------- | | spin | boolean | false | Enables the rotation (360dg) of the trigger action when the speed dial is opening |

TODO List

• Change color of the fab buttons on hover/selection
• Make the trigger button change icon when the user open the speed dial (configurable)
• Let the speed dial open a "sheet" of material instead of just mini-fab action buttons