匯入
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
快速鍵提示，與項目的結尾端對齊。