CascadeSelect

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

インポート # 


import CascadeSelect from 'primevue/cascadeselect';

基本 #

CascadeSelectは、v-modelプロパティとoptionsコレクションを使用して制御されたコンポーネントとして使用されます。グループのラベルを定義するには、optionGroupLabelプロパティが必要であり、グループの子を参照するプロパティを定義するにはoptionGroupChildrenが必要です。optionGroupChildrenの順序はデータ階層に対応する必要があるため重要です。

都市を選択3件の結果があります

<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />

テンプレート #

CascadeSelectは、v-modelプロパティとoptionsコレクションを使用して制御されたコンポーネントとして使用されます。グループのラベルを定義するには、optionGroupLabelプロパティが必要であり、グループの子を参照するプロパティを定義するにはoptionGroupChildrenが必要です。optionGroupChildrenの順序はデータ階層に対応する必要があるため重要です。

都市を選択3件の結果があります

<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
    <template #option="slotProps">
        <div class="flex items-center">
            <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px"  />
            <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
            <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
            <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
        </div>
    </template>
</CascadeSelect>

読み込み状態 #

読み込み状態はloadingプロパティを使用して利用できます。

読み込み中...結果が見つかりません

<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />

フロートラベル #

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

都市を選択3件の結果があります

<FloatLabel>
    <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
        :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
    <label for="cs-city">City</label>
</FloatLabel>

塗りつぶし #

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

都市を選択3件の結果があります

<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />

無効 #

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

都市を選択3件の結果があります

<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null"  :options="countries" optionLabel="cname" optionGroupLabel="name"
    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />

無効 #

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

無効結果が見つかりません

<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />

アクセシビリティ #

スクリーンリーダー

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

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


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

<CascadeSelect aria-label="Options" />

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

キー機能
tabフォーカスをcascadeselect要素に移動します。
spaceポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合は、最初のオプションにフォーカスが移動します。
enterポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合は、最初のオプションにフォーカスが移動します。
下矢印ポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合は、最初のオプションにフォーカスが移動します。
上矢印ポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合は、最後のオプションにフォーカスが移動します。
任意の印刷可能な文字ポップアップを開き、ラベルがタイプされた文字で始まるオプションにフォーカスを移動します。選択されていない場合は、最初のオプションにフォーカスが移動します。

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

キー機能
tabポップアップを非表示にし、次のタブ可能な要素にフォーカスを移動します。存在しない場合、フォーカス可能なオプションが選択され、オーバーレイが閉じられ、ページの次の要素にフォーカスが移動します。
shift + tabポップアップを非表示にし、前のタブ可能な要素にフォーカスを移動します。
enterフォーカスされたオプションを選択し、ポップアップを閉じます。
spaceフォーカスされたオプションを選択し、ポップアップを閉じます。
escapeポップアップを閉じ、フォーカスをcascadeselect要素に移動します。
下矢印次のオプションにフォーカスを移動します。
上矢印前のオプションにフォーカスを移動します。
alt + 上矢印フォーカスされたオプションを選択し、ポップアップを閉じ、フォーカスをcascadeselect要素に移動します。
右矢印オプションが閉じている場合、オプションを開きます。それ以外の場合は、最初の子供オプションにフォーカスを移動します。
左矢印オプションが開いている場合、オプションを閉じます。それ以外の場合は、親オプションにフォーカスを移動します。
home入力カーソルを最後に移動します。そうでない場合は、最初のオプションにフォーカスを移動します。
end入力カーソルを先頭に移動します。そうでない場合は、最後のオプションにフォーカスを移動します。
任意の印刷可能な文字ラベルがタイプされた文字で始まるオプションにフォーカスを移動します。
PrimeTekによるVue 3上のPrimeVue 4.0.7PrimeTek