[英]FAB Menu Button with angular2-mdl
我正在使用angular2-mdl構建一個Angular 2應用程序。 我在頁面中添加了一個FAB按鈕,但在文檔中找不到任何地方,angular2-mdl或MDL,有關如何添加FAB菜單的信息( 見圖) 。
有沒有辦法用angular2-mdl或MDL來解決這個問題? 我已經在許多應用程序中看到它完成了。
這是我到目前為止的按鈕代碼:
<button (click)="editUserDialog.show()" mdl-button mdl-button-type="fab" mdl-colored="accent" mdl-ripple>
<mdl-icon>add</mdl-icon>
</button>
謝謝
我使用@angular2-mdl/popover
和@angular2-mdl/core
的fab-button以及提供工具提示的芯片構建了一個帶有angular2-mdl的FAB菜單。
您可以在此處查看fab-menu的完整實現: https : //github.com/mseemann/angular2-mdl-ext/tree/master/src/components/fab-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>
對於項目:
<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>
你可以像這樣使用它:
<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>
在這里查看安裝和使用細節: @ angular-mdl / fab-menu
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.