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

问题描述

现在点击汉堡菜单我得到下拉列表而不是我需要它在汉堡菜单上的鼠标悬停这里是堆栈闪电战

解决方案

您可以使用 matMenuTrigger 指令

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

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

<span (mouseleave)="menuTrigger.closeMenu()"><按钮垫菜单项><mat-icon>home</mat-icon><span>首页</span>…………<mat-icon>exit_to_app</mat-icon><span>注销</span></span></mat-menu>

分叉 DEMO

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