TreeSelect

TreeSelectは、階層データから選択するためのフォームコンポーネントです。

インポート#


import { TreeSelect } from 'primereact/treeselect';
         

基本#

TreeSelectは、valueプロパティとonChangeプロパティ、そしてoptionsコレクションを使用して制御コンポーネントとして使用されます。内部的にはTreeコンポーネントが使用されているため、オプションモデルはTreeNode APIに基づいています。

シングルセレクションモードでは、値のバインドはノードのkey値である必要があります。

アイテムを選択

<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

複数選択#

selectionModeをmultipleに設定することで、複数のノードを選択できます。複数選択モードでは、デフォルトでmetaキーを押す（例：⌘）必要がありますが、metaKeySelectionプロパティを無効にすることで設定できます。タッチ対応デバイスでは、TreeSelectは常にmetaキーを無視することに注意してください。

複数選択モードでは、値のバインドはキーと値のペアである必要があります。キーはノードキー、値は選択を示すブール値です。


{
    '0-0': true,
    '0-1-0': true
}
         
アイテムを選択

<TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false}  
    className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items"></TreeSelect>
         

チェックボックス#

selectionModeをcheckboxとして設定することで、チェックボックスを使用して複数のノードを選択できます。

チェックボックス選択モードでは、値のバインドはキーと値のペアである必要があります。キーはノードキー、値はノードの状態を表すcheckedとpartialCheckedプロパティを持つオブジェクトです。


{
    '0-0': {
        partialChecked: false,
        checked: true
    }
}
         
アイテムを選択

<TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false}  
    className="md:w-20rem w-full" selectionMode="checkbox" display="chip" placeholder="Select Items"></TreeSelect>
         

フィルター#

filterプロパティを追加することでフィルタリングを有効にできます。デフォルトでは、ノードのlabelプロパティがテキストフィールドの値と比較されます。検索時に使用するフィールドをカスタマイズするには、 filterByプロパティを定義します。さらに、filterModeはフィルタリング戦略を指定します。lenientモードでは、クエリがノードと一致すると、ノードの子はさらに検索されません。一方、strictモードでは、クエリがノードと一致すると、すべての子孫でフィルタリングが続けられます。

アイテムを選択

<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    filter className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

クリアアイコン#

showClearが有効になっている場合、TreeSelectをリセットするためのクリアアイコンが追加されます。

アイテムを選択

<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

制御#

ノードの展開状態は、expandedKeysプロパティとonToggleプロパティを使用してプログラムで管理されます。

アイテムを選択

<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"
    expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} panelHeaderTemplate={headerTemplate}></TreeSelect>
         

フロートラベル#

フォーカスされたときに、入力フィールドの上にフロートラベルが表示されます。FloatLabelのドキュメントで詳細を確認してください。

空

<FloatLabel className="w-full md:w-20rem">
    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes}
        className="w-full"></TreeSelect>
    <label htmlFor="treeselect">TreeSelect</label>
</FloatLabel>
         

塗りつぶし#

variantプロパティをfilledとして指定すると、デフォルトのoutlinedスタイルよりも視覚的に強調されたコンポーネントが表示されます。

アイテムを選択

<TreeSelect variant="filled" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

無効#

invalidプロパティを使用して無効な状態を表示し、検証エラーを示します。フォーム検証ライブラリと統合する際に使用できます。

アイテムを選択

<TreeSelect invalid value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

無効#

disabledが存在する場合、要素は編集およびフォーカスできません。

アイテムを選択

<TreeSelect disabled placeholder="Select Item" className="md:w-20rem w-full" />
         

アクセシビリティ#

スクリーンリーダー

コンポーネントの説明となる値は、aria-labelledbyまたはaria-labelプロパティで指定できます。treeselect要素は、aria-haspopup属性とaria-expanded属性に加えて、comboboxロールを持ちます。comboboxとポップアップ間の関係は、ポップアップのIDを参照するaria-controlsによって作成されます。

ポップアップリストは、combobox要素のaria-controls属性を参照するIDを持ち、ロールとしてtreeを使用します。各リストアイテムは、aria-label、aria-selectedおよびaria-expanded属性とともにtreeitemロールを持ちます。チェックボックス選択では、aria-selectedの代わりにaria-checkedが使用されます。チェックボックスとトグルアイコンは、スクリーンリーダーから非表示になります。代わりに、treeitemロールと属性を持つ親要素が、リーダーとキーボードサポートに使用されます。treenodeのコンテナ要素は、groupロールを持ちます。aria-setsize、aria-posinset、aria-level属性は暗黙的に計算され、各treeitemに追加されます。

フィルタリングが有効になっている場合、filterInputPropsを定義して、aria-*プロパティを入力要素に与えることができます。


<span id="dd1">Options</span>
<TreeSelect aria-labelledby="dd1" />

<TreeSelect aria-label="Options" />
     

閉じた状態のキーボードサポート

キー機能
tabフォーカスをtreeselect要素に移動します。
spaceポップアップを開き、視覚的なフォーカスを選択されたtreenodeに移動します。選択されていない場合、最初のtreenodeにフォーカスが移動します。
下矢印ポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合、最初のオプションにフォーカスが移動します。

ポップアップのキーボードサポート

キー機能
tabポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。フォーカス可能な要素がない場合、最初のフォーカス可能な要素にフォーカスが移動します。
shift + tabポップアップ内の前のフォーカス可能な要素にフォーカスを移動します。フォーカス可能な要素がない場合、最後のフォーカス可能な要素にフォーカスが移動します。
enterフォーカスされたオプションを選択し、選択モードがシングルであればポップアップを閉じます。
spaceフォーカスされたオプションを選択し、選択モードがシングルであればポップアップを閉じます。
escapeポップアップを閉じ、フォーカスをtreeselect要素に移動します。
下矢印次のtreenodeにフォーカスを移動します。
上矢印前のtreenodeにフォーカスを移動します。
右矢印ノードが閉じている場合、ノードを開きます。それ以外の場合は、最初のノードにフォーカスを移動します。
左矢印ノードが開いている場合、ノードを閉じます。それ以外の場合は、親ノードにフォーカスを移動します。

フィルター入力のキーボードサポート

キー機能
enterポップアップを閉じ、フォーカスをtreeselect要素に移動します。
escapeポップアップを閉じ、フォーカスをtreeselect要素に移動します。

閉じるボタンのキーボードサポート

キー機能
enterポップアップを閉じ、フォーカスをtreeselect要素に移動します。
spaceポップアップを閉じ、フォーカスをtreeselect要素に移動します。
escapeポップアップを閉じ、フォーカスをtreeselect要素に移動します。
                          PrimeReact 10.8.3 提供： PrimeTek