ProgressBar

使用法

基本的な使用法:

import { ProgressBar } from '@wordpress/components';
const MyLoadingComponent = () => {
   return <ProgressBar />;
};

進捗を表す value (0から100まで) を渡すことで、決定的にすることもできます:

import { ProgressBar } from '@wordpress/components';
const MyLoadingComponent = ( { progress } ) => {
   return <ProgressBar value={ progress } />;
};

カスタム CSS クラス名を className に渡すことで、外観をカスタマイズできます。

.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/> 要素に渡されます。