Needless UI

コンポーネント

セレクト

短いリストからも巨大なリストからも、1つまたは複数の選択肢を選べます。

インポート

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入力booleanfalsemultiple のとき、すべての選択肢を選択または解除するボタンを追加します。
placeholder入力string'Select…'何も選ばれていないときに表示するテキスト。
label入力stringアクセシブルな名前。<label> でボタンに名前を付けていない場合に使います。
triggerId入力stringボタンの id。<label for> で使います。
disabled入力booleanfalseセレクトを無効にします。
compareWith入力(a: V, b: V) => booleanObject.is2つの値が同じ選択肢かどうかを判定します。値がオブジェクトの場合に使います。
virtual入力boolean | 'auto''auto'表示範囲の行だけをレンダリングします。常に行う、行わない、200行を超えたら行う auto のいずれか。
openChange出力booleanリストが開いたとき、または閉じたときに出力します。
showメソッド() => voidリストを開きます。
hideメソッド() => voidリストを閉じます。
focusメソッド(options?: FocusOptions) => voidボタンにフォーカスします。

表示や読み上げに使うテキストもすべて入力なので、翻訳できます： selectAllLabel clearAllLabel emptyLabel

NuiOption

1つの選択肢。セレクト、コンボボックス、コマンドパレットのいずれもこれを受け取ります。

名前型デフォルト説明
valueプロパティV選んだときに設定される値。型は任意です。
labelプロパティstring表示され、検索の対象になるテキスト。
descriptionプロパティstringラベルの下に表示する補足テキスト。
groupプロパティstring同じグループの選択肢は、その見出しの下に順番に表示されます。
keywordsプロパティstring[]検索でマッチさせる追加の語。たとえば同義語やコード。
disabledプロパティboolean表示はされますが、選べません。
childrenプロパティNuiOption<V>[]1階層下の選択肢。これがあるとリストはツリーになります。

NuiOptionTemplate

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

セレクター
ng-template[nuiOptionTemplate]

NuiOptionText

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

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