Компонент ProgressBar из библиотеки WordPress — это простой горизонтальный индикатор выполнения, который отображает прогресс выполнения задач. Компонент поддерживает два режима работы: определенный (determinate), когда указано конкретное значение прогресса, и неопределенный (indeterminate), когда значение прогресса не задано.
Базовый пример использования
В этом примере создается ProgressBar без указания прогресса, что делает его неопределенным (indeterminate). Такой индикатор можно использовать для обозначения процесса, который не имеет заранее определенной продолжительности.
import { ProgressBar } from '@wordpress/components';
const MyLoadingComponent = () => {
return <ProgressBar />;
};
Пример с определенным прогрессом (Determinate ProgressBar)
Для создания прогресс-бара с определенным значением можно передать значение value от 0 до 100, которое будет представлять процент выполнения задачи.
import { ProgressBar } from '@wordpress/components';
const MyLoadingComponent = ({ progress }) => {
return <ProgressBar value={progress} />;
};
Здесь, если передать progress значение 75, ProgressBar отобразит 75% выполнения.
Кастомизация внешнего вида
Вы можете изменить внешний вид ProgressBar, передав кастомный класс через параметр className. Например, добавим класс с кастомной шириной и стилями:
/* Определим стили для кастомного класса прогресс-бара */
.my-custom-progress-bar {
width: 100%;
background-color: #e0e0e0; /* Цвет фона */
height: 8px; /* Высота полосы прогресса */
border-radius: 4px; /* Закругленные углы */
overflow: hidden; /* Обрезаем содержимое, выходящее за границы */
}
.my-custom-progress-bar > .progress-bar-indicator {
background-color: #4caf50; /* Цвет индикатора выполнения */
height: 100%; /* Заполняем всю высоту полосы */
}
Применим этот класс к ProgressBar:
import { ProgressBar } from '@wordpress/components';
const MyLoadingComponent = () => {
return <ProgressBar className="my-custom-progress-bar" value={60} />;
};
Этот пример отобразит прогресс-бар с кастомными стилями и прогрессом 60%.
Параметры компонента ProgressBar
Компонент ProgressBar принимает следующие параметры, которые позволяют управлять его поведением и внешним видом.
- value:
number
Числовое значение от0до100, представляющее текущий процент выполнения. Если параметр не указан, компонент будет отображаться в неопределенном режиме (индикация загрузки без конкретного прогресса).
Обязательный: Нет. - className:
string
Класс CSS, применяемый к элементуdiv, являющемуся основой для прогресс-бара. Позволяет добавлять собственные стили, чтобы изменить внешний вид компонента.
Обязательный: Нет.
Унаследованные параметры
Любые дополнительные параметры, переданные компоненту ProgressBar, будут автоматически применены к внутреннему элементу <progress />. Это позволяет использовать стандартные HTML-атрибуты, такие как id, title, или aria-* для улучшения доступности и добавления дополнительных возможностей.
Полный пример: Кастомизация и Управление состоянием
В этом примере создадим компонент ProgressBar, который изменяет свое значение динамически:
import { useState, useEffect } from 'react';
import { ProgressBar } from '@wordpress/components';
const DynamicProgressBar = () => {
const [progress, setProgress] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setProgress((prev) => (prev < 100 ? prev + 10 : 100));
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<div>
<h4>Загрузка: {progress}%</h4>
<ProgressBar className="dynamic-progress-bar" value={progress} />
</div>
);
};
В этом примере ProgressBar увеличивает значение на 10% каждую секунду, пока не достигнет 100%, а кастомный класс dynamic-progress-bar позволяет добавить дополнительные стили.
Заключение
Компонент ProgressBar из WordPress — это простой, но мощный инструмент для отображения статуса выполнения задач. Его гибкость в настройках позволяет легко интегрировать его в любой интерфейс и адаптировать под нужные стили и требования.