CascadeSelect

CascadeSelectは、ネストされたオプション構造から値を選択するためのフォームコンポーネントです。

インポート#


import { CascadeSelect } from 'primereact/cascadeselect';
         

基本#

CascadeSelectは、value と onChange プロパティ、および options コレクションを持つ制御されたコンポーネントとして使用されます。グループのラベルを定義するには、optionGroupLabel プロパティが必要です。また、 グループの子を参照するプロパティを定義するには、optionGroupChildren が必要です。optionGroupChildren の順序は、データ階層に対応する必要があるため重要であることに注意してください。

都市を選択

<CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
         

ローディング状態#

ローディング状態は、loading プロパティを使用して使用できます。

ローディング中...

<CascadeSelect loading placeholder="Loading..." className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
         

テンプレート#

アイテムの内容は、オプションをパラメータとして取る itemTemplate プロパティでカスタマイズされます。

都市を選択

<CascadeSelect value={selectedCity} onChange={e => setSelectedCity(e.value)} options={countries} 
    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} 
    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} style={{ minWidth: '14rem' }} />
         

フロートラベル#

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

p-emptylabel

<FloatLabel>
    <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
        optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
        className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
    <label htmlFor="cs-city">City</label>
</FloatLabel>
         

塗りつぶし#

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

都市を選択

<CascadeSelect variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
         

無効#

無効状態は、検証に失敗したことを示すために invalid プロパティを使用して表示されます。フォーム検証ライブラリと統合する場合は、このスタイルを使用できます。

都市を選択

<CascadeSelect invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
         

無効#

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

無効

<CascadeSelect disabled placeholder="Disabled" style={{ minWidth: '14rem' }} />
         

アクセシビリティ#

スクリーンリーダー

コンポーネントを説明する値は、aria-labelledby または aria-label プロパティで提供できます。cascadeselect 要素には、aria-haspopup および aria-expanded に加えて、combobox ロールがあります。属性。コンボボックスとポップアップの関係は、ポップアップの ID を参照する aria-controls で作成されます。

ポップアップリストには、combobox 要素の aria-controls 属性を参照する ID があり、ロールとして tree を使用します。各リストアイテムには、aria-label、aria-selected とともに treeitem ロールがあります。および aria-expanded 属性。ツリーノードのコンテナ要素には、group ロールがあります。aria-setsize、aria-posinset、および aria-level 属性は、暗黙的に計算され、各ツリーアイテムに追加されます。

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


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

<CascadeSelect aria-label="Options" />
     

クローズ状態のキーボードサポート

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

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

キー機能
tabポップアップを非表示にし、フォーカスを次のタブ移動可能な要素に移動します。
shift + tabポップアップを非表示にし、フォーカスを前のタブ移動可能な要素に移動します。
enterフォーカスされたオプションを選択し、ポップアップを閉じます。
spaceフォーカスされたオプションを選択し、ポップアップを閉じます。
escapeポップアップを閉じ、フォーカスを cascadeselect 要素に移動します。
下矢印フォーカスを次のオプションに移動します。
上矢印フォーカスを前のオプションに移動します。
右矢印オプションが閉じている場合はオプションを開き、それ以外の場合はフォーカスを最初の子オプションに移動します。
左矢印オプションが開いている場合はオプションを閉じ、それ以外の場合はフォーカスを親オプションに移動します。
                    PrimeReact 10.8.3 by PrimeTek