15.0.0 • Published 1 year ago
@angular-mdl/fab-menu v15.0.0
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 |