Fab
Installing
npm i --save @angular-mdl/popover @angular-mdl/fab-menu
import { MdlSelectModule } from '@angular-mdl/fab-menu';
If you need to support IE11 please add https://www.npmjs.com/package/custom-event-polyfill
to your polyfills.
Usage example
<mdl-fab-menu #mainFabMenu>
<mdl-fab-menu-item
[fabMenu]="mainFabMenu"
icon="note_add"
label="make a note"
(menu-clicked)="log('we need to do something here')">
</mdl-fab-menu-item>
<mdl-fab-menu-item
[fabMenu]="mainFabMenu"
icon="refresh"
label="refresh"
(menu-clicked)="/*do something here*/">
</mdl-fab-menu-item>
<mdl-fab-menu-item
[fabMenu]="mainFabMenu"
icon="refresh"
label="refresh"
(menu-clicked)="/*do something here*/">
</mdl-fab-menu-item>
</mdl-fab-menu>
forcing the tooltips to be displayed
<mdl-fab-menu #mainFabMenu [alwaysShowTooltips]="true">
...
</mdl-fab-menu>
API Summary
mdl-fab-menu
Name
Type
Description
[alwaysShowTooltips]
boolean
decide if either or not the tooltips should always be displayed (let it unbinds to always display them on touch screens and on mouseover on "mouse-screen")
mdl-fab-menu-item
Name
Type
Description
[fabMenu]
MdlFabMenu
the enclosing menu
[icon]
string
mini-fab icon
[label]
string
tooltip content
(menu-clicked)
event
the item has been clicked