FABメニューangle2-mdlのボタン

Question

angle2-mdlでAngular 2アプリを構築しています。私は自分のページにFABボタンを追加しましたが、FABメニューを追加する方法については、angular2-mdlまたはMDLのドキュメントのどこにも見つかりませんでした。see image)

これは、 ？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とFABメニューを構築しましたメニューは@angular2-mdl/popover、fab-buttonは@angular2-mdl/coreからth eチップにツールチップを提供します。

あなたはここにFAB-メニューの完全な実装を確認することができます。コンポーネントのhttps://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/fab-menu

主要部分は、メニューのおよびメニューの項目

のテンプレートです：

<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> 

01：

<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> 

やアイテムのため

あなたは、このようにそれを使用することができます：

<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