进度条

进度条是一个进程状态指示器。

导入 #


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" />

不适用。