トグルボタンは、ボタンを使用してブール値を選択するために使用されます。
import ToggleButton from 'primevue/togglebutton';
ブール値プロパティへの双方向バインディングは、標準のv-modelディレクティブを使用して定義されます。
<ToggleButton v-model="checked" onLabel="On" offLabel="Off" />
アイコンとラベルは、_onLabel_、_offLabel_、_onIcon_、_offIcon_プロパティを使用してカスタマイズできます。
<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock"
offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
検証の失敗を示すために、_invalid_プロパティを使用して無効な状態が表示されます。フォーム検証ライブラリと統合する場合に、このスタイルを使用できます。
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
_disabled_が存在する場合、要素を編集およびフォーカスすることはできません。
<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
class="w-full sm:w-40" aria-label="Confirmation" />
トグルボタンコンポーネントは、内部でスクリーンリーダーにのみ表示されるスイッチ要素としてネイティブのボタン要素を使用します。コンポーネントを記述する値は、_aria-labelledby_または_aria-label_プロパティで定義できます。コンポーネントは表示されるラベルを変更するため、コンポーネントがフォーカスを受け取ったときにスクリーンリーダーが異なるラベルを読み取る結果になるため、これらのプロパティのいずれかを使用することを強くお勧めします。これを防ぐために、状態に関連して変更されないariaラベルを常に提供してください。
<span id="rememberme">Remember Me</span>
<ToggleButton aria-labelledby="rememberme" />
<ToggleButton aria-label="Remember Me" />
キーボードインタラクションは、グループ内のチェックボックスのネイティブブラウザ処理から派生しています。
| キー | 機能 |
|---|---|
| タブ | ボタンにフォーカスを移動します。 |
| スペース | チェック状態を切り替えます。 |