Combobox API · Needless UI

匯入

import-combobox.ts

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

NuiCombobox

在你輸入時提供建議選項的文字欄位。

選擇器: nui-combobox

NuiCombobox: 屬性
名稱	型別	預設值	說明
`options`輸入	`NuiOption<V>[]`		選項，以 `NuiOption` 物件的形式提供。
`value`雙向繫結	`V \| null`	`null`	選取的值，或 `null`。也能搭配表單使用。
`values`雙向繫結	`readonly V[]`	`[]`	啟用 `multiple` 時選取的多個值。
`multiple`輸入	`boolean`	`false`	允許選取多個選項，並以標籤的形式顯示。
`create`輸入	`(text: string) => V`		從輸入的文字建立值。清單會提議新增還不是選項的文字。
`filtering`輸入	`boolean`	`true`	在輸入時篩選選項。由伺服器篩選時請關閉。
`loading`輸入	`boolean`	`false`	在結果送達前顯示載入提示列。
`clearable`輸入	`boolean`	`false`	加上清除值的按鈕，並允許按 Esc 鍵清除。
`placeholder`輸入	`string`	`''`	欄位為空時顯示的文字。
`label`輸入	`string`		無障礙名稱，在沒有 `<label>` 為欄位命名時使用。
`inputId`輸入	`string`		文字欄位的 id，供 `<label for>` 使用。
`disabled`輸入	`boolean`	`false`	停用欄位。
`compareWith`輸入	`(a: V, b: V) => boolean`	`Object.is`	判斷兩個值是否為同一個選項，適用於物件型別的值。
`displayWith`輸入	`(value: V) => string`	`String`	不在選項中的值所顯示的文字，例如在選項載入前設定的值。
`virtual`輸入	`boolean \| 'auto'`	`'auto'`	只渲染可見的列：一律、從不，或 `auto`（超過 200 列時啟用）。
`queryChange`輸出	`string`		在輸入時發出文字，用於伺服器端搜尋。
`openChange`輸出	`boolean`		清單開啟或關閉時發出。
`show`方法	`() => void`		開啟清單。
`hide`方法	`() => void`		關閉清單。
`clear`方法	`() => void`		清除值和文字。
`focus`方法	`(options?: FocusOptions) => void`		讓文字欄位取得焦點。

它顯示或朗讀的所有文字也都是輸入屬性，因此可以翻譯： emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

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

選擇器: ng-template[nuiOptionTemplate]

NuiOptionText

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

選擇器: [nuiOptionText]

NuiOptionText: 屬性
名稱	型別	預設值	說明
`nuiOptionText`輸入	`NuiOptionRow<V>`		列，取自範本的 context。