如何显示鼠标悬停时棱角材料的下落? [英] How to show the angular material drop down on mouse over?

问题描述

现在，单击汉堡菜单时，我会得到一个下拉列表，而不是需要将鼠标悬停在汉堡菜单上，这是堆栈闪电战

解决方案

您可以使用 matMenuTrigger 指令

 < button mat-icon-button [matMenuTriggerFor] =菜单"#menuTrigger ="matMenuTrigger"(mouseenter)="menuTrigger.openMenu()"> 

要隐藏菜单，请为菜单添加 mouseleave 事件.

将所有菜单项捆绑在 span 或 div 标记内.然后附加(mouseleave)事件

 < mat-menu#menu ="matMenu" [overlapTrigger] ="false">< span(mouseleave)="menuTrigger.closeMenu()"><按钮垫菜单项>< mat-icon>首页</mat-icon>< span>首页</span>........< mat-icon> exit_to_app</mat-icon>< span>登出</span></button></span></mat-menu> 

分叉演示

Now on clicking of the hamburger menu i am getting drop down list instead i need it on mouse hover on hamburger menu here is the stack blitz link.

解决方案

You can do this using matMenuTrigger Directive

<button mat-icon-button [matMenuTriggerFor]="menu" 
    #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">

To hide menu, add mouseleave event for a menu.

Bundle all your menu items within a span or div tag. And then attach (mouseleave) event to it

<mat-menu #menu="matMenu" [overlapTrigger]="false">
    <span (mouseleave)="menuTrigger.closeMenu()">
      <button mat-menu-item>
        <mat-icon>home</mat-icon>
        <span>Home</span>
        ........
       <mat-icon>exit_to_app</mat-icon>
       <span>Logout</span>
     </button>
    </span>
</mat-menu>

Forked DEMO

这篇关于如何显示鼠标悬停时棱角材料的下落?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！