Needless UI

コンポーネント

コンボボックス

入力に合わせて選択肢を提案するテキストフィールド。

インポート

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

NuiCombobox

入力に合わせて選択肢を提案するテキストフィールド。

セレクター
nui-combobox
名前型デフォルト説明
options入力NuiOption<V>[]選択肢。NuiOption オブジェクトで指定します。
value双方向V | nullnull選ばれた値、または null。フォームでも使えます。
values双方向readonly V[][]選ばれた値の配列。multiple のときに使います。
multiple入力booleanfalse複数の選択肢を選べるようにします。選んだものはチップとして表示されます。
create入力(text: string) => V入力したテキストから値を作成します。選択肢にないテキストは、リストで追加を提案します。
filtering入力booleantrue入力に合わせて選択肢を絞り込みます。サーバー側で絞り込む場合はオフにします。
loading入力booleanfalse結果を待っている間、読み込み中の行を表示します。
clearable入力booleanfalse値をクリアするボタンを追加し、Esc キーでもクリアできるようにします。
placeholder入力string''フィールドが空のときに表示するテキスト。
label入力stringアクセシブルな名前。<label> でフィールドに名前を付けていない場合に使います。
inputId入力stringテキストフィールドの id。<label for> で使います。
disabled入力booleanfalseフィールドを無効にします。
compareWith入力(a: V, b: V) => booleanObject.is2つの値が同じ選択肢かどうかを判定します。値がオブジェクトの場合に使います。
displayWith入力(value: V) => stringString選択肢にない値に表示するテキスト。たとえば、選択肢の読み込み前に設定された値に使います。
virtual入力boolean | 'auto''auto'表示範囲の行だけをレンダリングします。常に行う、行わない、200行を超えたら行う auto のいずれか。
queryChange出力string入力中のテキストを出力します。サーバー検索に使います。
openChange出力booleanリストが開いたとき、または閉じたときに出力します。
showメソッド() => voidリストを開きます。
hideメソッド() => voidリストを閉じます。
clearメソッド() => void値とテキストをクリアします。
focusメソッド(options?: FocusOptions) => voidテキストフィールドにフォーカスします。

表示や読み上げに使うテキストもすべて入力なので、翻訳できます： emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

コンポーネント内の ng-template に付けると、各行を自分で描画できます。コンテキストには選択肢とその行が入っています。

セレクター
ng-template[nuiOptionTemplate]

NuiOptionText

選択肢のラベル（一致した文字に印を付けたもの）、説明、パスを描画します。独自の行で使います。

セレクター
[nuiOptionText]
名前型デフォルト説明
nuiOptionText入力NuiOptionRow<V>行。テンプレートのコンテキストから渡します。