API ของ Select · Needless UI

Import

import-select.ts

import { type NuiOption, NuiSelect } from '@needless-ui/angular/select';

NuiSelect

ปุ่มที่เปิดรายการตัวเลือก

Selector: nui-select

NuiSelect: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`options`Input	`NuiOption<V>[]`		ตัวเลือกต่าง ๆ ในรูปออบเจกต์ `NuiOption`
`value`สองทาง	`V \| null`	`null`	ค่าที่เลือก หรือ `null` ใช้กับฟอร์มได้ด้วย
`values`สองทาง	`readonly V[]`	`[]`	ค่าทั้งหมดที่เลือก เมื่อใช้ `multiple`
`multiple`Input	`boolean`	`false`	ให้เลือกได้หลายตัวเลือก รายการจะเปิดค้างไว้ระหว่างที่เลือก
`selectAll`Input	`boolean`	`false`	เมื่อใช้ `multiple` จะเพิ่มปุ่มที่เลือกหรือล้างทุกตัวเลือก
`placeholder`Input	`string`	`'Select…'`	ข้อความที่แสดงเมื่อยังไม่ได้เลือกอะไร
`label`Input	`string`		ชื่อที่เข้าถึงได้ เมื่อไม่มี `<label>` ตั้งชื่อให้ปุ่ม
`triggerId`Input	`string`		id ของปุ่ม สำหรับ `<label for>`
`disabled`Input	`boolean`	`false`	ปิดใช้งาน Select
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	บอกว่าค่าสองค่าเป็นตัวเลือกเดียวกันหรือไม่ สำหรับค่าที่เป็นออบเจกต์
`virtual`Input	`boolean \| 'auto'`	`'auto'`	เรนเดอร์เฉพาะแถวที่มองเห็น: ทุกครั้ง ไม่เลย หรือ `auto` เมื่อเกิน 200 แถว
`openChange`Output	`boolean`		ส่งค่าออกมาเมื่อรายการเปิดหรือปิด
`show`เมธอด	`() => void`		เปิดรายการ
`hide`เมธอด	`() => void`		ปิดรายการ
`focus`เมธอด	`(options?: FocusOptions) => void`		โฟกัสที่ปุ่ม

ข้อความทุกส่วนที่แสดงหรือประกาศก็เป็น input เช่นกัน จึงแปลได้: selectAllLabel clearAllLabel emptyLabel

NuiOption

ตัวเลือกหนึ่งรายการ ทั้ง Select Combobox และพาเลตคำสั่งต่างรับตัวเลือกแบบนี้

NuiOption: พร็อพเพอร์ตี
ชื่อ	ชนิด	คำอธิบาย
`value`พร็อพเพอร์ตี	`V`	ค่าที่จะถูกตั้งเมื่อเลือกตัวเลือกนี้ เป็นชนิดใดก็ได้
`label`พร็อพเพอร์ตี	`string`	ข้อความที่แสดงและใช้ค้นหา
`description`พร็อพเพอร์ตี	`string`	ข้อความรองใต้ป้ายกำกับ
`group`พร็อพเพอร์ตี	`string`	ตัวเลือกที่อยู่กลุ่มเดียวกันจะแสดงเรียงตามลำดับใต้หัวข้อนั้น
`keywords`พร็อพเพอร์ตี	`string[]`	คำเพิ่มเติมที่การค้นหาจะจับคู่ด้วย เช่น คำพ้องความหมายหรือรหัส
`disabled`พร็อพเพอร์ตี	`boolean`	แสดงอยู่ แต่เลือกไม่ได้
`children`พร็อพเพอร์ตี	`NuiOption<V>[]`	ตัวเลือกในระดับถัดลงไป ซึ่งทำให้รายการเป็นโครงสร้างแบบต้นไม้

NuiOptionTemplate

ใส่ไว้ที่ ng-template ภายในคอมโพเนนต์เพื่อวาดแต่ละแถวเอง context จะมีตัวเลือกและแถวของตัวเลือกนั้น

Selector: ng-template[nuiOptionTemplate]

NuiOptionText

วาดป้ายกำกับของตัวเลือกพร้อมทำเครื่องหมายตัวอักษรที่ตรงกัน รวมถึงคำอธิบายและเส้นทางของตัวเลือก สำหรับแถวที่คุณวาดเอง

Selector: [nuiOptionText]

NuiOptionText: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`nuiOptionText`Input	`NuiOptionRow<V>`		แถว ซึ่งได้จาก context ของเทมเพลต