@angular-mdl/fab-menu

Angular Material Design Lite - Fab menu Component

Usage no npm install needed!

<script type="module">
  import angularMdlFabMenu from 'https://cdn.skypack.dev/@angular-mdl/fab-menu';
</script>

README

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