Menu

Menu

[toc]

概述

OVERVIEW

<mat-menu>是一个包含选项列表的浮动面板。

<mat-menu> is a floating panel containing list of options.

<mat-menu>元素本身不渲染任何东西。菜单通过matMenuTriggerFor指令添加到应用中并打开。

By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive:

<mat-menu #appMenu="matMenu">
  <button mat-menu-item> Settings </button>
  <button mat-menu-item> Help </button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
   <mat-icon>more_vert</mat-icon>
</button>

编码切换菜单

Toggling the menu programmatically

menu暴露了一个打开/关闭的API。在此例中需要注意的是,仍然需要一个matMenuTriggerFor指令,用来将菜单附加在DOM中的一个触发器元素上。

The menu exposes an API to open/close programmatically. Please note that in this case, an matMenuTriggerFor directive is still necessary to attach the menu to a trigger element in the DOM.

class MyComponent {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  someMethod() {
    this.trigger.openMenu();
  }
}

图标

Icons

菜单支持在菜单项文本前展示mat-icon元素。

Menus support displaying mat-icon elements before the menu item text.

my-comp.html

<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon> dialpad </mat-icon>
    <span> Redial </span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon> voicemail </mat-icon>
    <span> Check voicemail </span>
  </button>
  <button mat-menu-item>
    <mat-icon> notifications_off </mat-icon>
    <span> Disable alerts </span>
  </button>
</mat-menu>

自定义菜单位置

Customizing menu position

默认菜单展示在其触发器的下方(y轴)和后面(x轴),并与其重叠。可以通过使用xPosition (before | after)和yPosition (above | below)属性来改变菜单位置。使用[overlapTrigger]="false"属性,可以强制指定菜单与其触发器不重叠。

By default, the menu will display below (y-axis), after (x-axis), and overlapping its trigger. The position can be changed using the xPosition (before | after) and yPosition (above | below) attributes. The menu can be be forced to not overlap the trigger using [overlapTrigger]="false" attribute.

<mat-menu #appMenu="matMenu" yPosition="above">
  <button mat-menu-item> Settings </button>
  <button mat-menu-item> Help </button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

嵌套菜单

Nested menu

Material支持用mat-menu-item打开一个子菜单。前提是你需要定义你的根菜单与子菜单,并在mat-menu-item上设置[matMenuTriggerFor]来触发子菜单。

Material supports the ability for an mat-menu-item to open a sub-menu. To do so, you have to define your root menu and sub-menus, in addition to setting the [matMenuTriggerFor] on the mat-menu-item that should trigger the sub-menu:

<mat-menu #rootMenu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu">Power</button>
  <button mat-menu-item>System settings</button>
</mat-menu>

<mat-menu #subMenu="matMenu">
  <button mat-menu-item>Shut down</button>
  <button mat-menu-item>Restart</button>
  <button mat-menu-item>Hibernate</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="rootMenu">
  <mat-icon>more_vert</mat-icon>
</button>

键盘操作

Keyboard interaction

  • 下箭头: 下一个菜单项获取焦点
  • 上箭头: 上一个菜单项获取焦点
  • 右箭头: 打开此菜单的子菜单
  • 左箭头: 如果本身是子菜单,则关闭当前菜单
  • 回车: 激活焦点的菜单
  • DOWN_ARROW: Focuses the next menu item
  • UP_ARROW: Focuses previous menu item
  • RIGHT_ARROW: Opens the menu item’s sub-menu
  • LEFT_ARROW: Closes the current menu, if it is a sub-menu.
  • ENTER: Activates the focused menu item

无障碍

Accessibility

无文本或标签的菜单触发器或菜单项,需要通过aria-labelaria-labelledby指定一个有意义的标签。

Menu triggers or menu items without text or labels should be given a meaningful label via aria-label or aria-labelledby.

API

菜单(menu)的API参考

API reference for Angular Material menu

import {MatMenuModule} from '@angular/material/menu';

指令

Directives

MatMenu

Selector: mat-menu

Exported as: matMenu

属性

Properties

属性名 描述 Description
@Input(‘class’)
panelClass: string
此方法将多个类传入mat-menu元素中,并将其应用到容器显示的菜单模板中。否则很难从外部组件定义内部菜单的样式。 This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it’s difficult to style the containing menu from outside the component.
@Input()
xPosition: MenuPositionX
菜单的x轴位置。 Position of the menu in the X axis.
@Input()
yPosition: MenuPositionY
菜单的y轴位置。 Position of the menu in the Y axis.
@Output()
closed: new EventEmitter()
菜单关闭的事件。 Event emitted when the menu is closed.
direction: Direction 菜单的布局方向。 Layout direction of the menu.
items: QueryList 菜单中的选项列表。 List of the items inside of a menu.
overlapTrigger: boolean 菜单是否与其触发器重叠。 Whether the menu should overlap its trigger.
parentMenu: MatMenuPanel | undefined 当前菜单面板的父菜单。 Parent menu of the current menu panel.
@Output()
Deprecated
close: this.closed
菜单关闭的事件。 Event emitted when the menu is closed.
Deprecated
classList: string
此方法将多个类传入mat-menu元素中,并将其应用到容器显示的菜单模板中。否则很难从外部组件定义内部菜单的样式。 This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it’s difficult to style the containing menu from outside the component.

方法

Method

focusFirstItem

  • 描述
    • 使菜单中的第一项获得焦点。此方法用于当使用回车键打开菜单时,菜单触发器使第一项获得焦点。
    • Focus the first item in the menu. This method is used by the menu trigger to focus the first item when the menu is opened by the ENTER key.

resetActiveItem

  • 描述
    • 重置菜单中的激活项。此方法用于使用鼠标打开菜单时,当按下箭头按钮时,允许用户从第一项开始。
    • Resets the active item in the menu. This is used when the menu is opened by mouse, allowing the user to start from the first option when pressing the down arrow.

setElevation

  • 描述
    • 设置菜单面板深度。
    • Sets the menu panel elevation.
  • 参数
    • depth : 此菜单的父菜单数量。
    • Number of parent menus that come before the menu.

setPositionClasses

  • 描述
    • 为了确保菜单面板动画从正确的方向出现,需要设置对应的位置类。
    • It’s necessary to set position-based classes to ensure the menu panel animation folds out from the correct direction.
  • 参数
    • posX : MenuPositionX = this.xPosition
    • posY : MenuPositionY = this.yPosition

MatMenuItem

此指令用在mat-menu标签内部。通常用来设置role属性。

This directive is intended to be used inside an mat-menu tag. It exists mostly to set the role attribute.

Selector: [mat-menu-item]

Exported as: matMenuItem

方法

Method

focus

  • 描述
    • 使菜单项获得焦点。
    • Focuses the menu item.

getLabel

  • 描述
    • 获取标签,此标签用于决定哪个选项应获取焦点。
    • Gets the label to be used when determining whether the option should be focused.
  • 返回
    • string

MatMenuTrigger

此指令与mat-menu标签一同使用。用于切换菜单实例的显示。

This directive is intended to be used in conjunction with an mat-menu tag. It is responsible for toggling the display of the provided menu instance.

Selector: [mat-menu-trigger-for] [matMenuTriggerFor]

Exported as: matMenuTrigger

属性

Properties

属性名 描述 Description
@Input(‘matMenuTriggerFor’)
menu: MatMenuPanel
与触发器关联的菜单实例。 References the menu instance that the trigger is associated with.
@Output()
menuClosed: new EventEmitter()
关联菜单关闭的事件。 Event emitted when the associated menu is closed.
@Output()
menuOpened: new EventEmitter()
关联菜单打开的事件。 Event emitted when the associated menu is opened.
dir: Direction 包含应用的文字方向。 The text direction of the containing app.
menuOpen: boolean 菜单是否打开。 Whether the menu is open.
@Output()
Deprecated
onMenuClose: this.menuClosed
关联菜单关闭的事件。 Event emitted when the associated menu is closed.
@Output()
Deprecated
onMenuOpen: this.menuOpened
关联菜单打开的事件。 Event emitted when the associated menu is opened.

方法

Method

closeMenu

  • 描述
    • 关闭菜单。
    • Closes the menu.

focus

  • 描述
    • 使菜单触发器获得焦点。
    • Focuses the menu trigger.

openMenu

  • 描述
    • 打开菜单。
    • Opens the menu.

toggleMenu

  • 描述
    • 切换菜单的打开关闭状态。
    • Toggles the menu between the open and closed states.

triggersSubmenu

  • 描述
    • 菜单触发其是否有子菜单或为顶级菜单。
    • Whether the menu triggers a sub-menu or a top-level one.
  • 返回
    • boolean

附加接口

Additional interfaces

MatMenuDefaultOptions

可被复写的默认mat-menu项。

Default mat-menu options that can be overridden.

属性

Properties

属性名 描述 Description
overlapTrigger: boolean 菜单是否与其触发器重叠。 Whether the menu should overlap the menu trigger.
xPosition: MenuPositionX 菜单的x轴位置。 The x-axis position of the menu.
yPosition: MenuPositionY 菜单的y轴位置。 The y-axis position of the menu.

翻译部分版权归YahaCode团队所有。仅供学习研究之用,任何组织或个人不得私自以此用于任何形式的商业目的

你可能还想看看下面的内容?

One thought on “Menu

发表评论