プログレスバー

プログレスバーは、処理のステータスインジケーターです。


import ProgressBar from 'primevue/progressbar';

プログレスバーは、valueプロパティと共に使用されます。

50%

<ProgressBar :value="50"></ProgressBar>

値はリアクティブなので、動的に更新するとバーも変更されます。


<ProgressBar :value="value"></ProgressBar>

プログレスバー内のカスタムコンテンツは、defaultスロットで定義されます。

40/100

<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>

追跡する値のない進捗状況の場合は、modeプロパティをindeterminateに設定します。


<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>

スクリーンリーダー

プログレスバーコンポーネントは、progressbarロールと、aria-valueminaria-valuemaxaria-valuenow属性と共に使用されます。コンポーネントを記述する値は、aria-labelledbyおよびaria-labelプロパティを使用して定義できます。


<span id="label_status" />
<ProgressBar aria-labelledby="label_status" />

<ProgressBar aria-label="Status" />

キーボードサポート

該当なし。