云策 WordPress 开发者社区

块编辑器开发文档

ProgressBar

查看官方原文 ↗
💡 云策文档标注

概述

ProgressBar 是 WordPress 组件库中的一个简单水平进度条组件，支持确定性和不确定性两种模式。开发者可以通过传递 value 属性控制进度值，或使用 className 自定义样式。

关键要点

  • 支持两种模式：确定性模式（指定 value 值，范围 0-100）和不确定性模式（未指定 value）。
  • 可通过 value 属性设置进度值，className 属性应用自定义 CSS 类以调整外观。
  • 组件基于 元素构建，可接受额外的 props 传递给底层元素。

代码示例

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

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

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

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

Props 说明

  • value: number（可选），进度值，范围 0-100，未指定时为不确定性模式。
  • className: string（可选），应用于底层 div 元素的 CSS 类，用于自定义进度条轨道样式。
  • 继承 props: 任何额外 props 将传递给底层 元素。
📄 原文内容

A simple horizontal progress bar component.

Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn’t been specified.

Usage

Basic usage:

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

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

You can also make it determinate by passing a value (from 0 to 100) representing the progress:

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

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

You can customize its appearance by passing a custom CSS class name to className.

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

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

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

Props

The component accepts the following props:

value: number

The progress value, a number from 0 to 100.
If a value is not specified, the progress bar will be considered indeterminate.

  • Required: No

className: string

A CSS class to apply to the underlying div element, serving as a progress bar track.

  • Required: No

Inherited props

Any additional props will be passed the underlying <progress/> element.