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

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")

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