SelectButtonは、ボタンを使用してリストから単一または複数の項目を選択するために使用されます。
import SelectButton from 'primevue/selectbutton';
SelectButtonは、_options_コレクションとともに_modelValue_プロパティを使用して制御されたコンポーネントとして使用されます。オプションのラベルと値は、それぞれ_optionLabel_プロパティと_optionValue_プロパティで定義されます。オプションが文字列配列などの単純なプリミティブ値の場合、_optionLabel_と_optionValue_は必要ありません。
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
SelectButtonは、デフォルトで1つの項目のみを選択できます。 _multiple_オプションを設定すると、複数の項目を選択できます。複数の場合、モデルプロパティは配列である必要があります。
<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
オプションのラベルは、デフォルトでアイテムの表示テキストとして使用されます。カスタムコンテンツのサポートについては、オプションインスタンスをパラメーターとして取得する_option_テンプレートを定義します。
<SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
<template #option="slotProps">
<i :class="slotProps.option.icon"></i>
</template>
</SelectButton>
検証に失敗したことを示すために、_invalid_プロパティを使用して無効な状態が表示されます。フォーム検証ライブラリと統合する場合に、このスタイルを使用できます。
<SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null" />
_disabled_が存在する場合、要素を編集したり、完全にフォーカスしたりすることはできません。 _optionDisabled_プロパティを使用して、特定のオプションを無効にすることもできます。
<SelectButton v-model="value" :options="options" disabled />
<SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
SelectButtonコンポーネントは内部でToggleButtonを使用し、_group_ロールを持ちます。コンポーネントを記述する値は、_aria-labelledby_プロパティを介して提供できます。
キーボードの操作は、グループ内のチェックボックスのネイティブブラウザの処理から派生しています。
| キー | 機能 |
|---|---|
| tab | フォーカスを、ページタブシーケンスの次のフォーカス可能な要素に移動します。 |
| _shift_ + _tab_ | フォーカスを、ページタブシーケンスの前のフォーカス可能な要素に移動します。 |
| スペース | ボタンのチェック状態を切り替えます。 |