API ของ Menu · Needless UI

Import

import-menu.ts

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

NuiMenuTrigger

เปิดเมนู มักใช้กับ nuiButton

Selector: [nuiMenuTrigger]
Export เป็น: nuiMenuTrigger

NuiMenuTrigger: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`nuiMenuTrigger`Input	`Menu`		เมนูที่จะเปิด ได้แก่ reference `ngMenu` ของ `nuiMenu`

NuiMenu

เมนูที่ประกอบด้วยรายการ แสดงเป็น popover ข้างทริกเกอร์ ค่า export ngMenu ของเมนูคือเมนู Angular Aria ที่ทริกเกอร์และเมนูย่อยต้องใช้

Selector: [nuiMenu]
Export เป็น: ngMenu

NuiMenu: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`wrap`Input	`boolean`	`true`	ปุ่มลูกศรจะวนจากรายการสุดท้ายกลับไปรายการแรกหรือไม่
`typeaheadDelay`Input	`number`	`500`	จำนวนมิลลิวินาทีก่อนที่การพิมพ์เพื่อค้นหาจะเริ่มใหม่
`disabled`Input	`boolean`	`false`	ปิดใช้งานทั้งเมนู
`enter`Input	`NuiEnter`		ลักษณะการปรากฏ: `zoom` `fade` `drop` `rise` `unfold` `flip` `swing` `slide` หรือ `none`
`motion`Input	`NuiMotion`		สปริงที่ใช้ในการเคลื่อนไหว: `snappy` `bouncy` `jelly` `elastic` `lazy` `mechanical` หรือ `none`
`spring`Input	`NuiSpring`		สปริงแบบใดก็ได้ในรูป `{ stiffness, damping, mass }` ซึ่งจะคอมไพล์เป็น CSS ขณะรันไทม์ และใช้แทน `motion`
`corners`Input	`NuiCorners`		รูปทรงของมุม: `round` `squircle` `bevel` `scoop` `notch` หรือ `square`
`radius`Input	`NuiRadius`		ขนาดของมุม: `none` `small` `medium` `large` หรือ `full`
`density`Input	`NuiDensity`		พื้นที่ที่ใช้: `compact` `regular` หรือ `roomy`
`itemSelected`Output	`V`		ส่งค่าของรายการที่เลือกออกมา หากอยู่ที่เมนูราก จะทำงานกับรายการในเมนูย่อยด้วย

Input สำหรับการปรับแต่งที่ไม่ได้กำหนดค่าไว้ จะใช้ค่าตาม attribute data-nui-* ที่อยู่ใกล้ที่สุด ดูคู่มือการปรับแต่ง

NuiMenuItem

รายการหนึ่งใน nuiMenu

Selector: [nuiMenuItem]

NuiMenuItem: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`value`Input	`V`		ระบุตัวตนของรายการ ต้องไม่ซ้ำกันทั้งเมนูรวมถึงเมนูย่อย
`disabled`Input	`boolean`	`false`	ปิดใช้งานรายการ ยังเลื่อนไปถึงได้ด้วยปุ่มลูกศรแต่เลือกไม่ได้
`submenu`Input	`Menu`		`nuiMenu` ที่ซ้อนอยู่ซึ่งรายการนี้เป็นตัวเปิด
`role`Input	`'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio'`	`'menuitem'`	`menuitem` `menuitemcheckbox` หรือ `menuitemradio`
`checked`Input	`boolean \| undefined`		สถานะการติ๊กเลือกของรายการแบบ checkbox หรือ radio
`tone`Input	`'neutral' \| 'danger'`	`'neutral'`	`danger` สำหรับการกระทำที่ทำลายข้อมูล
`searchTerm`Input	`string`		ข้อความที่ใช้จับคู่เมื่อพิมพ์เพื่อค้นหา ค่าเริ่มต้นคือป้ายกำกับของรายการ
`selected`Output	`V`		ส่งค่าของรายการออกมาเมื่อรายการถูกเลือกด้วยเมาส์หรือคีย์บอร์ด

NuiMenuSeparator

เส้นคั่นระหว่างกลุ่มรายการ

Selector: [nuiMenuSeparator]

NuiMenuShortcut

คำแนะนำคีย์ลัด จัดชิดท้ายรายการ

Selector: [nuiMenuShortcut]