Поиск по сайту:

Как создать доступный индикатор выполнения с помощью React

Убедитесь, что индикаторы выполнения вашего веб-приложения выглядят хорошо и могут использоваться всеми.

Индикаторы выполнения отлично подходят для вовлечения пользователей, поскольку они указывают на цель, которую необходимо достичь. Вместо того, чтобы смотреть на веб-страницу, ожидающую ресурса, вы видите заполняющийся индикатор выполнения. Индикаторы выполнения не должны быть доступны только зрячим пользователям. Каждый должен легко понять ваш индикатор выполнения.

Итак, как создать доступный индикатор выполнения с помощью React?

Создайте компонент индикатора выполнения

Создайте новый компонент с именем ProgressBar.js и добавьте следующий код:

const ProgressBar = ({progress}) => {
    return (
        <div>
            <div role="progressbar"
                 aria-valuenow={progress}
                 aria-valuemin={0}
                 aria-valuemax={100}>
                <span>{`${progress}%`}</span>
            </div>
        </div>
    );
};
  
export default ProgressBar;

Первый элемент div — это контейнер, а второй элемент div — это фактический индикатор выполнения. Элемент span содержит процент индикатора выполнения.

В целях доступности второй div имеет следующие атрибуты:

  • Роль прогрессбара.
  • aria-valuenow, чтобы указать текущее значение индикатора выполнения.
  • aria-valuemin, чтобы указать минимальное значение индикатора выполнения.
  • aria-valuemax, чтобы указать максимальное значение индикатора выполнения.

Атрибуты aria-valuemin и aria-valuemax не нужны, если максимальное и минимальное значения индикатора выполнения равны 0 и 100, поскольку HTML по умолчанию использует эти значения.

Стилизация индикатора выполнения

Вы можете стилизовать индикатор выполнения, используя встроенные стили или библиотеку CSS-in-JS, например styled-comments. Оба эти подхода обеспечивают простой способ передачи реквизитов из компонента в CSS.

Вам нужна эта функция, потому что ширина индикатора выполнения зависит от значения прогресса, переданного в качестве реквизита.

Вы можете использовать следующие встроенные стили:

const container = {
    height: 20,
    width: "100%",
    backgroundColor: "#fff",
    borderRadius: 50,
    margin: 50
}
 
const bar = {
    height: "100%",
    width: `${progress}%`,
    backgroundColor: "#90CAF9",
    borderRadius: "inherit",
}
 
const label = {
    padding: "1rem",
    color: "#000000",
}

Измените возвращаемую часть компонента, включив в нее стили, как показано ниже:

<div style={container}>
    <div style={bar} role="progressbar"
        aria-valuenow={progress}
        aria-valuemin={0}
        aria-valuemax={100}>
        <span style={label} >{`${progress}%`}</span>
    </div>
</div>

Отобразите индикатор выполнения следующим образом:

<ProgressBar progress={50}/>

Отобразится индикатор выполнения с завершением на 50 процентов.

Создание компонентов в React

Теперь вы можете создать доступный индикатор выполнения с процентами, который можно повторно использовать в любой части вашего приложения. С помощью React вы можете создавать подобные независимые компоненты пользовательского интерфейса и использовать их в качестве строительных блоков сложного приложения.

Статьи по данной тематике: