导入

import-menu.ts
import {
NuiMenu,
NuiMenuItem,
NuiMenuSeparator,
NuiMenuShortcut,
NuiMenuTrigger,
} from '@needless-ui/angular/menu';

NuiMenuTrigger

打开菜单。通常用在 nuiButton 上。

选择器
[nuiMenuTrigger]
导出为
nuiMenuTrigger
NuiMenuTrigger: 属性
名称类型默认值说明
nuiMenuTrigger输入Menu要打开的菜单:某个 nuiMenungMenu 引用。

NuiMenu

由菜单项组成的菜单,以 popover 形式显示在触发器旁边。它导出的 ngMenu 就是触发器和子菜单所接收的 Angular Aria 菜单。

选择器
[nuiMenu]
导出为
ngMenu
NuiMenu: 属性
名称类型默认值说明
wrap输入booleantrue方向键是否从最后一项循环回第一项。
typeaheadDelay输入number500键入搜索重置前等待的毫秒数。
disabled输入booleanfalse禁用整个菜单。
enter输入NuiEnter入场方式:zoomfadedropriseunfoldflipswingslidenone
motion输入NuiMotion运动时使用的弹簧:snappybouncyjellyelasticlazymechanicalnone
spring输入NuiSpring任意弹簧,以 { stiffness, damping, mass } 的形式指定,在运行时编译为 CSS。它会覆盖 motion
corners输入NuiCorners边角的形状:roundsquirclebevelscoopnotchsquare
radius输入NuiRadius边角的大小:nonesmallmediumlargefull
density输入NuiDensity占用的空间:compactregularroomy
itemSelected输出V发出所选菜单项的值。在根菜单上,选择子菜单中的项时也会触发。

用于自定义的输入属性如果未设置,会沿用最近的 data-nui-* 属性。详见自定义指南

NuiMenuItem

nuiMenu 中的一个菜单项。

选择器
[nuiMenuItem]
NuiMenuItem: 属性
名称类型默认值说明
value输入V菜单项的标识。在整个菜单(包括子菜单)中必须唯一。
disabled输入booleanfalse禁用该菜单项。它仍可通过方向键到达,但无法被选择。
submenu输入Menu该菜单项打开的嵌套 nuiMenu
role输入'menuitem' | 'menuitemcheckbox' | 'menuitemradio''menuitem'menuitemmenuitemcheckboxmenuitemradio
checked输入boolean | undefined复选或单选菜单项的选中状态。
tone输入'neutral' | 'danger''neutral'破坏性操作请使用 danger
searchTerm输入string键入搜索时用于匹配的文本,默认为菜单项的标签。
selected输出V通过鼠标或键盘选择该菜单项时,发出它的值。

NuiMenuSeparator

菜单项分组之间的分隔线。

选择器
[nuiMenuSeparator]

NuiMenuShortcut

快捷键提示,与菜单项的末端对齐。

选择器
[nuiMenuShortcut]