带有 angular2-mdl 的 FAB 菜单按钮

Question

我正在使用 angular2-mdl 构建一个 Angular 2 应用程序。我在页面中添加了 FAB 按钮，但在 angular2-mdl 或 MDL 文档中找不到有关如何添加 FAB 菜单的信息 (see image).

有没有办法用 angular2-mdl 或 MDL 做到这一点？我已经在许多应用程序中看到了它。

到目前为止，这是我的按钮代码：

<button (click)="editUserDialog.show()" mdl-button  mdl-button-type="fab" mdl-colored="accent" mdl-ripple>
    <mdl-icon>add</mdl-icon>
</button>

谢谢

Answer 1

我使用来自@angular2-mdl/popover 的弹出菜单和来自@angular2-mdl/core 的fab 按钮和提供工具提示的芯片构建了一个带有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