进度条

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

导入#


import { ProgressBar } from 'primereact/progressbar';

进度条通过 value 属性使用。

50%


<ProgressBar value={50}></ProgressBar>

值是响应式的，因此动态更新它也会改变进度条。


<ProgressBar value={value}></ProgressBar>

进度条内部的自定义内容使用 displayValueTemplate 属性定义。

40/100


<ProgressBar value={40} displayValueTemplate={valueTemplate}></ProgressBar>

对于没有值可跟踪的进度，将 mode 属性设置为 indeterminate。


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

进度条组件使用 progressbar role 以及 aria-valuemin、aria-valuemax 和 aria-valuenow 属性。可以使用 aria-labelledby 和 aria-label 属性定义描述组件的值。


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

<ProgressBar aria-label="Status" />

不适用。