[英]FAB Menu Button with angular2-mdl
I'm building an Angular 2 app with angular2-mdl. 我正在使用angular2-mdl构建一个Angular 2应用程序。 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) . 我在页面中添加了一个FAB按钮,但在文档中找不到任何地方,angular2-mdl或MDL,有关如何添加FAB菜单的信息( 见图) 。
Is there a way todo this with angular2-mdl or MDL? 有没有办法用angular2-mdl或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. 我使用@angular2-mdl/popover
和@angular2-mdl/core
的fab-button以及提供工具提示的芯片构建了一个带有angular2-mdl的FAB菜单。
You can check the full implementation of the fab-menu here: https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/fab-menu 您可以在此处查看fab-menu的完整实现: 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 在这里查看安装和使用细节: @ angular-mdl / fab-menu
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.