Menu API · Needless UI

匯入

import-menu.ts

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

開啟選單。通常套用在 nuiButton 上。

NuiMenuTrigger: 屬性
名稱	型別	預設值	說明
`nuiMenuTrigger`輸入	`Menu`		要開啟的選單：某個 `nuiMenu` 的 `ngMenu` 參照。

由項目組成的選單，以 popover 形式顯示在觸發元素旁。它匯出的 ngMenu 就是觸發元素和子選單所接收的 Angular Aria 選單。

NuiMenu: 屬性
名稱	型別	預設值	說明
`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-* 屬性。詳見客製化指南。

nuiMenu 中的一個項目。

NuiMenuItem: 屬性
名稱	型別	預設值	說明
`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`		透過滑鼠或鍵盤選取該項目時，發出它的值。

項目群組之間的分隔線。

快速鍵提示，與項目的結尾端對齊。