Fab Speed Dial for Angular Material app

Note: FabSpeedDial v2.* It is compatible with angular > 6

Donation

Donations

Demo

FabSpeedDial

Step 1: Install rb-fab-speed-dial and Angular Material

NPM

npm install --save rb-fab-speed-dial
npm install --save @angular/material @angular/cdk

Import RbFabSpeedDialModule into usage Module.

/*----  src/app/app.module.ts     -----*/
import { RbFabSpeedDialModule } from 'rb-fab-speed-dial';

@NgModule({
  ...
  imports: [RbFabSpeedDialModule],
  ...
})
export class AppModule.ts { }

Step 2: Animations

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

NPM

npm install --save @angular/animations

/*----  src/app/app.module.ts     -----*/
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule.ts { }

Usage

Use the label <rb-fab-speed-dial> in the html of your component and inside it you can place all the mini-fab-buttons that you need but you will have to place the rbFabItem directive in each one of them.

	<rb-fab-speed-dial>
			<button mat-mini-fab rbFabItem >
				<mat-icon>home</mat-icon>
		  </button>
		  <button mat-mini-fab  rbFabItem>
				<mat-icon>android</mat-icon>
		  </button>
		  <button mat-mini-fab  rbFabItem>
				<mat-icon>send</mat-icon>
		  </button>
	</rb-fab-speed-dial>

###Properties | Name | Description | | ------------ | ------------ | | @Input() color: ThemePalette | Theme color palette for the component. Only trigger button. | | @Input() direction: string | (default: right) values: up, down, left, right | | @Input() mode: string | Type of animation, (default: fling) values: fling, scale. | | @Input() openIcon: string | Material Icon name for the open button. | | @Input() closeIcon: string | fMaterial Icon name for the close button. | | @Output() open: EventEmitter | Event emitted when the mini-fab buttons are visible or hidden.|

License

MIT, see LICENSE.md for details.