进度条

一个简单的水平进度条组件。

支持两种模式：确定性（determinate）和不确定性（indeterminate）。当指定了具体的进度值（0 到 100）时，进度条为确定性；未指定值时，则为不确定性。

用法

基本用法：

import { ProgressBar } from '@wordpress/components';

const MyLoadingComponent = () => {
    return <ProgressBar />;
};

你还可以通过传递表示进度的 value（0 到 100）使其变为确定性模式：

import { ProgressBar } from '@wordpress/components';

const MyLoadingComponent = ( { progress } ) => {
    return <ProgressBar value={ progress } />;
};

你可以通过向 className 传递自定义 CSS 类名来自定义其外观。

.my-custom-progress-bar {
    width: 100%;
}

import { ProgressBar } from '@wordpress/components';

const MyLoadingComponent = () => {
    return <ProgressBar className="my-custom-progress-bar" />;
};

属性

该组件接受以下属性：

value: number

进度值，一个从 0 到 100 的数字。
如果未指定 value，进度条将被视为不确定性模式。

• 必填：否

className: string

应用于底层 div 元素（作为进度条轨道）的 CSS 类。

• 必填：否

继承的属性

任何额外的属性都将传递给底层的 <progress/> 元素。