進度條

進度條是一個進度狀態指示器。

匯入 #


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-valuemin、aria-valuemax 和 aria-valuenow 屬性。可以使用 aria-labelledby 和 aria-label 屬性定義描述元件的值。


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

<ProgressBar aria-label="Status" />

不適用。