导入
import {
NuiMenu,
NuiMenuItem,
NuiMenuSeparator,
NuiMenuShortcut,
NuiMenuTrigger,
} from '@needless-ui/angular/menu';NuiMenuTrigger
打开菜单。通常用在 nuiButton 上。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
nuiMenuTrigger输入 | Menu | 要打开的菜单:某个 nuiMenu 的 ngMenu 引用。 |
NuiMenu
由菜单项组成的菜单,以 popover 形式显示在触发器旁边。它导出的 ngMenu 就是触发器和子菜单所接收的 Angular Aria 菜单。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
wrap输入 | boolean | true | 方向键是否从最后一项循环回第一项。 |
typeaheadDelay输入 | number | 500 | 键入搜索重置前等待的毫秒数。 |
disabled输入 | boolean | false | 禁用整个菜单。 |
enter输入 | NuiEnter | 入场方式:zoom、fade、drop、rise、unfold、flip、swing、slide 或 none。 | |
motion输入 | NuiMotion | 运动时使用的弹簧:snappy、bouncy、jelly、elastic、lazy、mechanical 或 none。 | |
spring输入 | NuiSpring | 任意弹簧,以 { stiffness, damping, mass } 的形式指定,在运行时编译为 CSS。它会覆盖 motion。 | |
corners输入 | NuiCorners | 边角的形状:round、squircle、bevel、scoop、notch 或 square。 | |
radius输入 | NuiRadius | 边角的大小:none、small、medium、large 或 full。 | |
density输入 | NuiDensity | 占用的空间:compact、regular 或 roomy。 | |
itemSelected输出 | V | 发出所选菜单项的值。在根菜单上,选择子菜单中的项时也会触发。 |
用于自定义的输入属性如果未设置,会沿用最近的 data-nui-* 属性。详见自定义指南。
NuiMenuItem
nuiMenu 中的一个菜单项。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value输入 | V | 菜单项的标识。在整个菜单(包括子菜单)中必须唯一。 | |
disabled输入 | boolean | false | 禁用该菜单项。它仍可通过方向键到达,但无法被选择。 |
submenu输入 | Menu | 该菜单项打开的嵌套 nuiMenu。 | |
role输入 | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'menuitem' | menuitem、menuitemcheckbox 或 menuitemradio。 |
checked输入 | boolean | undefined | 复选或单选菜单项的选中状态。 | |
tone输入 | 'neutral' | 'danger' | 'neutral' | 破坏性操作请使用 danger。 |
searchTerm输入 | string | 键入搜索时用于匹配的文本,默认为菜单项的标签。 | |
selected输出 | V | 通过鼠标或键盘选择该菜单项时,发出它的值。 |
NuiMenuSeparator
菜单项分组之间的分隔线。
NuiMenuShortcut
快捷键提示,与菜单项的末端对齐。