Needless UI

Các component

Select

Chọn một hoặc nhiều tùy chọn, từ danh sách ngắn hay cực dài.

Import

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

NuiSelect

Một nút mở ra danh sách các tùy chọn.

Selector
nui-select
TênKiểuMặc địnhMô tả
optionsInputNuiOption<V>[]Các tùy chọn, dưới dạng đối tượng NuiOption.
valueHai chiềuV | nullnullGiá trị đã chọn, hoặc null. Cũng dùng được với biểu mẫu.
valuesHai chiềureadonly V[][]Các giá trị đã chọn, khi có multiple.
multipleInputbooleanfalseCho phép chọn nhiều tùy chọn. Danh sách vẫn mở trong lúc bạn chọn.
selectAllInputbooleanfalseKhi có multiple, thêm một nút để chọn hoặc bỏ chọn mọi tùy chọn.
placeholderInputstring'Select…'Văn bản hiển thị khi chưa chọn gì.
labelInputstringAccessible name, khi không có <label> nào đặt tên cho nút.
triggerIdInputstringId của nút, dùng cho <label for>.
disabledInputbooleanfalseVô hiệu hóa select.
compareWithInput(a: V, b: V) => booleanObject.isCho biết hai giá trị có phải cùng một tùy chọn hay không, dành cho giá trị là đối tượng.
virtualInputboolean | 'auto''auto'Chỉ render các dòng đang hiển thị: luôn luôn, không bao giờ, hoặc auto khi quá 200 dòng.
openChangeOutputbooleanPhát ra khi danh sách mở hoặc đóng.
showPhương thức() => voidMở danh sách.
hidePhương thức() => voidĐóng danh sách.
focusPhương thức(options?: FocusOptions) => voidChuyển focus vào nút.

Mọi văn bản mà component hiển thị hoặc đọc lên cũng là input, nên bạn có thể dịch chúng: selectAllLabel clearAllLabel emptyLabel

NuiOption

Một tùy chọn. Select, combobox và bảng lệnh đều nhận kiểu đối tượng này.

TênKiểuMặc địnhMô tả
valueThuộc tínhVGiá trị được đặt khi chọn tùy chọn này. Kiểu bất kỳ.
labelThuộc tínhstringVăn bản được hiển thị và dùng để tìm kiếm.
descriptionThuộc tínhstringVăn bản phụ bên dưới nhãn.
groupThuộc tínhstringCác tùy chọn cùng nhóm được liệt kê theo thứ tự dưới tiêu đề của nhóm đó.
keywordsThuộc tínhstring[]Các từ khác mà tìm kiếm sẽ khớp, chẳng hạn từ đồng nghĩa hoặc mã.
disabledThuộc tínhbooleanVẫn hiển thị nhưng không chọn được.
childrenThuộc tínhNuiOption<V>[]Các tùy chọn ở cấp dưới, biến danh sách thành cây.

NuiOptionTemplate

Đặt lên một ng-template bên trong component để tự vẽ từng dòng. Context chứa tùy chọn và dòng của nó.

Selector
ng-template[nuiOptionTemplate]

NuiOptionText

Vẽ nhãn của tùy chọn với các chữ cái khớp được đánh dấu, cùng mô tả và đường dẫn của nó, cho các dòng do bạn tự vẽ.

Selector
[nuiOptionText]
TênKiểuMặc địnhMô tả
nuiOptionTextInputNuiOptionRow<V>Dòng, lấy từ context của template.