Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.
Убедитесь, что индикаторы выполнения вашего веб-приложения хорошо выглядят и могут использоваться всеми.
Индикаторы выполнения отлично подходят для взаимодействия с пользователем, потому что они указывают на цель, которую нужно достичь. Вместо того, чтобы смотреть на веб-страницу, ожидающую ресурса, вы видите, как заполняется индикатор выполнения. Индикаторы выполнения не должны ограничиваться только зрячими пользователями. Каждый должен быть в состоянии понять ваш индикатор выполнения с легкостью.
Так как же создать доступный индикатор выполнения с помощью React?
Создайте компонент индикатора выполнения
Создайте новый компонент с именем ProgressBar.js и добавьте следующий код:
константа ProgressBar = ({прогресс}) => {
возвращаться (
<див>
<раздел роль ="индикатор"
aria-valuenow={прогресс}
ария-значениемин={0}
ария-значениемакс={100}>
<охватывать>{`${прогресс}%`}</span>
</div>
</div>
);
};
экспортпо умолчанию Индикатор;
Первый элемент div — это контейнер, а второй div — фактический индикатор выполнения. Элемент span содержит процент индикатора выполнения.
В целях доступности второй элемент div имеет следующие атрибуты:
- Роль индикатора прогресса.
- aria-valuenow, чтобы указать текущее значение индикатора выполнения.
- aria-valuemin для указания минимального значения индикатора выполнения.
- aria-valuemax для указания максимального значения индикатора выполнения.
Атрибуты aria-valuemin и aria-valuemax не нужны, если максимальное и минимальное значения индикатора выполнения равны 0 и 100, поскольку HTML по умолчанию использует эти значения.
Стилизация индикатора выполнения
Вы можете стилизовать индикатор выполнения, используя встроенные стили или Библиотека CSS-in-JS, такая как стилизованные компоненты. Оба этих подхода обеспечивают простой способ передачи свойств из компонента в CSS.
Вам нужна эта функциональность, потому что ширина индикатора выполнения зависит от значения прогресса, переданного в качестве реквизита.
Вы можете использовать следующие встроенные стили:
константа контейнер = {
рост: 20,
ширина: "100%",
фоновый цвет: "#ффф",
границаРадиус: 50,
маржа: 50
}константа бар = {
высота: "100%",
ширина: `${прогресс}%`,
фоновый цвет: "#90КАФ9",
границаРадиус: "наследовать",
}
константа метка = {
заполнение: "1 бэр",
цвет: "#000000",
}
Измените возвращаемую часть компонента, чтобы включить стили, как показано ниже:
<стиль div={контейнер}>
<стиль div={bar} роль="индикатор"
aria-valuenow={прогресс}
ария-значениемин={0}
ария-значениемакс={100}>
<стиль диапазона = {метка} >{`${прогресс}%`}</span>
</div>
</div>
Визуализируйте индикатор выполнения следующим образом:
<ProgressBar прогресс={50}/>
Это отображает индикатор выполнения с 50-процентным завершением.
Создание компонентов в React
Теперь вы можете создать доступный индикатор выполнения с процентами, который вы можете повторно использовать в любой части вашего приложения. С помощью React вы можете создавать подобные независимые компоненты пользовательского интерфейса и использовать их в качестве строительных блоков сложного приложения.
