Material2 如何在 mouseenter 上打开 md-menu

问题描述

我正在使用 Material 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>

Plunker 演示

对于您的代码，它将是:

For your code, it would be:

<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-menu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！