angular – Material2如何在mouseenter上打开md-menu
发布时间:2020-12-17 06:49:27 所属栏目:安全 来源:网络整理
导读:我正在使用Material 2来创建菜单.我有一个md按钮触发器打开一个md菜单.我希望按钮在悬停时打开.我知道Material Angular.io仍然很新.我已经用Google搜索了问题,但我想出了 Angularjs的结果.谁能指出我正确的方向? 这是我的html示例: button md-button [mdMe
我正在使用Material 2来创建菜单.我有一个md按钮触发器打开一个md菜单.我希望按钮在悬停时打开.我知道Material Angular.io仍然很新.我已经用Google搜索了问题,但我想出了
Angularjs的结果.谁能指出我正确的方向?
这是我的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()方法来完成此操作.
例: <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> Plunker demo 对于您的代码,它将是: <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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |