Angular Material 垫子菜单禁用 matMenuTriggerFor
Angular Material Mat Menu disable matMenuTriggerFor
我有以下 material 菜单:
<a mat-button [matMenuTriggerFor]="menu" disabled="true">Menu</a>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
请注意,我有一个 <a>
标签而不是 <button>
。
我想禁用垫子菜单触发器。如果我使用 button 标签,它会起作用,如果我将它用作 ancor 标签,它仍然会打开菜单:
关于如何使用 anchor
link 标签防止这种情况的想法?
Stackblitz example here.
嗯,锚标签没有被禁用属性所以你不能这样禁用它。
您可以将其更改为按钮并更改其样式。
或者您可以使用
pointer-events: none
禁止点击它。
例如:
<a mat-button [matMenuTriggerFor]="menu" [ngClass]="{ 'disabled' :condition }">Menu</a>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
并在 CSS 中:
.disabled {
pointer-events:none;
opacity:.5;
}
在我的解决方案中,我只是通过继承 MatMenuTrigger 来禁用点击事件处理。
import {Directive, Input} from '@angular/core';
import {MatMenuTrigger, MatMenuPanel} from '@angular/material/menu';
@Directive({
selector: `[sgMenuTriggerFor]`,
exportAs: 'sgMenuTrigger'
})
export class SgMenuTrigger extends MatMenuTrigger {
_handleClick(event: MouseEvent): void {}
@Input('sgMenuTriggerFor')
get menu() { return super.menu; }
set menu(menu: MatMenuPanel) {
super.menu = menu;
}
}
我有以下 material 菜单:
<a mat-button [matMenuTriggerFor]="menu" disabled="true">Menu</a>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
请注意,我有一个 <a>
标签而不是 <button>
。
我想禁用垫子菜单触发器。如果我使用 button 标签,它会起作用,如果我将它用作 ancor 标签,它仍然会打开菜单:
关于如何使用 anchor
link 标签防止这种情况的想法?
Stackblitz example here.
嗯,锚标签没有被禁用属性所以你不能这样禁用它。
您可以将其更改为按钮并更改其样式。
或者您可以使用
pointer-events: none
禁止点击它。
例如:
<a mat-button [matMenuTriggerFor]="menu" [ngClass]="{ 'disabled' :condition }">Menu</a>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
并在 CSS 中:
.disabled {
pointer-events:none;
opacity:.5;
}
在我的解决方案中,我只是通过继承 MatMenuTrigger 来禁用点击事件处理。
import {Directive, Input} from '@angular/core';
import {MatMenuTrigger, MatMenuPanel} from '@angular/material/menu';
@Directive({
selector: `[sgMenuTriggerFor]`,
exportAs: 'sgMenuTrigger'
})
export class SgMenuTrigger extends MatMenuTrigger {
_handleClick(event: MouseEvent): void {}
@Input('sgMenuTriggerFor')
get menu() { return super.menu; }
set menu(menu: MatMenuPanel) {
super.menu = menu;
}
}