Menu の API · Needless UI

インポート

import-menu.ts

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

メニューを開きます。通常は nuiButton に適用します。

NuiMenuTrigger: プロパティ
名前	型	デフォルト	説明
`nuiMenuTrigger`入力	`Menu`		開くメニュー。`nuiMenu` の `ngMenu` 参照を指定します。

項目を並べたメニューで、トリガーの隣にポップオーバーとして表示されます。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`		マウスまたはキーボードで項目が選ばれたときに、その値を出力します。

項目のグループを区切る線。

キーボードショートカットのヒント。項目の末尾側に揃えて表示されます。