17.0.0 • Published 3 months ago
ngx-speed-dial v17.0.0
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