Needless UI

元件

Select

從簡短或龐大的清單中選取一個或多個選項。

匯入

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

NuiSelect

點擊後開啟選項清單的按鈕。

選擇器
nui-select
名稱型別預設值說明
options輸入NuiOption<V>[]選項，以 NuiOption 物件的形式提供。
value雙向繫結V | nullnull選取的值，或 null。也能搭配表單使用。
values雙向繫結readonly V[][]啟用 multiple 時選取的多個值。
multiple輸入booleanfalse允許選取多個選項。選取期間清單會保持開啟。
selectAll輸入booleanfalse啟用 multiple 時，加上一個全選或全部清除的按鈕。
placeholder輸入string'Select…'尚未選取任何項目時顯示的文字。
label輸入string無障礙名稱，在沒有 <label> 為按鈕命名時使用。
triggerId輸入string按鈕的 id，供 <label for> 使用。
disabled輸入booleanfalse停用 Select。
compareWith輸入(a: V, b: V) => booleanObject.is判斷兩個值是否為同一個選項，適用於物件型別的值。
virtual輸入boolean | 'auto''auto'只渲染可見的列：一律、從不，或 auto（超過 200 列時啟用）。
openChange輸出boolean清單開啟或關閉時發出。
show方法() => void開啟清單。
hide方法() => void關閉清單。
focus方法(options?: FocusOptions) => void讓按鈕取得焦點。

它顯示或朗讀的所有文字也都是輸入屬性，因此可以翻譯： selectAllLabel clearAllLabel emptyLabel

NuiOption

單一選項。Select、Combobox 和命令面板都接收這種物件。

名稱型別預設值說明
value屬性V選取它時設定的值，可以是任何型別。
label屬性string顯示並用於搜尋的文字。
description屬性string顯示在主要文字下方的次要文字。
group屬性string群組相同的選項會依序列在該群組標題下。
keywords屬性string[]搜尋時額外比對的詞，例如同義詞或代碼。
disabled屬性boolean會顯示，但無法選取。
children屬性NuiOption<V>[]下一層的選項，會讓清單變成樹狀結構。

NuiOptionTemplate

把它放在元件內的 ng-template 上，就能自行繪製每一列。其 context 包含選項和它所在的列。

選擇器
ng-template[nuiOptionTemplate]

NuiOptionText

繪製選項的顯示文字（標示出相符的字母）、描述和路徑，用於你自訂的列。

選擇器
[nuiOptionText]
名稱型別預設值說明
nuiOptionText輸入NuiOptionRow<V>列，取自範本的 context。