Material2如何在mouseenter上打开md菜单 [英] Material2 How to open md-menu on mouseenter
本文介绍了Material2如何在mouseenter上打开md菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用材料2创建菜单.我有一个md按钮触发器,可以打开一个md菜单.我希望按钮在悬停时打开.我知道Material Angular.io仍然很新.我已经搜索了这个问题,但我只是想出了Angularjs的结果.谁能指出我正确的方向?
I am using Material 2 to create a menu. I have a md-button trigger that opens a md-menu. I want the button to open on hover. I know that the Material Angular.io is still pretty new. I have googled the problem but I just come up with Angularjs results. Can anyone point me in the right direction?
这是我的html示例:
Here is a sample of my html:
<button md-button [mdMenuTriggerFor]="userMenu" class="nav-btn" ><i class="fa fa-user" aria-hidden="true" id="user-icon"></i> NAME</button>
<md-menu #userMenu="mdMenu" xPosition="before" yPosition="below" [overlapTrigger]="false">
<button md-menu-item class="nav-dropdown" [routerLink]="['/dashboard']">DASHBOARD</button>
<button md-menu-item class="nav-dropdown">MY PROFILE</button>
<button md-menu-item class="nav-dropdown">lOGOUT</button>
</md-menu>
推荐答案
您可以通过在mouseenter上手动触发openMenu()
方法来实现.
You can do it by manually triggering the openMenu()
method on mouseenter.
示例:
<button md-icon-button
[md-menu-trigger-for]="menu"
#menuTrigger="mdMenuTrigger"
(mouseenter)="menuTrigger.openMenu()"
style="margin-right: 25px">
<md-icon>more_vert</md-icon>Menu 1
</button>
<md-menu #menu="mdMenu">
<button md-menu-item>
<md-icon>dialpad</md-icon>
<span>Redial</span>
</button>
<button md-menu-item disabled>
<md-icon>voicemail</md-icon>
<span>Check voicemail</span>
</button>
<button md-menu-item>
<md-icon>notifications_off</md-icon>
<span>Disable alerts</span>
</button>
</md-menu>
对于您的代码,应为:
<button md-button #menuTrigger="mdMenuTrigger"
(mouseenter)="menuTrigger.openMenu()"
[mdMenuTriggerFor]="userMenu"
class="nav-btn" >
<i class="fa fa-user" aria-hidden="true" id="user-icon"></i>
NAME
</button>
这篇关于Material2如何在mouseenter上打开md菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文