I'm building an Angular 2 app with angular2-mdl. I've add a FAB button to my page but can't find anywhere in the docs, angular2-mdl or MDL, information on how to add a FAB menu ( see image) .
Is there a way todo this with angular2-mdl or MDL? I've see it done in many apps.
Here is my button code so far:
<button (click)="editUserDialog.show()" mdl-button mdl-button-type="fab" mdl-colored="accent" mdl-ripple>
<mdl-icon>add</mdl-icon>
</button>
Thanks
I built a FAB menu with angular2-mdl using the popover menu from @angular2-mdl/popover
and the fab-button from @angular2-mdl/core
and the chip to provide tooltips.
You can check the full implementation of the fab-menu here: https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/fab-menu
The main parts of the component are the templates of the menu and of the items
for the menu:
<button mdl-button
mdl-button-type="fab"
mdl-colored="primary"
(click)="fabPopover.toggle($event)"
(touchstart)="alwaysShowTooltips = true"
>
<mdl-icon>add</mdl-icon>
</button>
<mdl-popover #fabPopover [hide-on-click]="true" [class.direction-up]="true">
<ng-content></ng-content>
</mdl-popover>
and for the items:
<button mdl-button mdl-button-type="mini-fab" (mouseover)="isHoovering = true" (mouseleave)="isHoovering = false" (click)="menuClick.emit()">
<mdl-icon>{{icon}}</mdl-icon>
</button>
<mdl-chip [mdl-label]="label" [hidden]="!(fabMenu.alwaysShowTooltips || isHoovering)"></mdl-chip>
you can then use it like this:
<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>
check out here for the installation and the usage details: @angular-mdl/fab-menu
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.