Как да създадете достъпна лента за напредък с React

Лентите за напредък са страхотни за ангажиране на потребителите, защото предоставят цел за постигане. Вместо да се взирате в уеб страница, чакаща за ресурс, виждате лента за напредъка да се запълва. Лентите за напредък не трябва да се ограничават само до зрящи потребители. Всеки би трябвало да може лесно да разбира вашата лента за напредък.

И така, как да създадете достъпна лента за напредък с React?

Създайте компонент на лентата на напредъка

Създайте нов компонент, наречен ProgressBar.js и добавете следния код:

конст ProgressBar = ({прогрес}) => {
връщане (
<див>
<div роля="прогрес лента"
 aria-valuenow={напредък}
 aria-valuemin={0}
 aria-valuemax={100}>
<педя>{`${progress}%`}</span>
</div>
</div>
 );
};
износпо подразбиране Прогресбар;

Първият елемент div е контейнерът, а вторият div е действителната лента за напредъка. Елементът span съдържа процента на лентата за напредък.

За целите на достъпността вторият div има следните атрибути:

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

Атрибутите aria-valuemin и aria-valuemax не са необходими, ако максималната и минималната стойност на лентата за напредък са 0 и 100, тъй като HTML по подразбиране използва тези стойности.

Оформяне на лентата на напредъка

Можете да стилизирате лентата за напредъка, като използвате вградени стилове или a CSS-в-JS библиотека като стилизирани компоненти. И двата подхода осигуряват лесен начин за предаване на подпори от компонента към CSS.

Имате нужда от тази функционалност, защото ширината на лентата за напредък зависи от стойността на напредъка, предадена като реквизити.

Можете да използвате тези вградени стилове:

конст контейнер = {
 височина: 20,
 ширина: "100%",
 Цвят на фона: "#Ф ф ф",
 радиус на границата: 50,
 марж: 50
}
конст лента = {
 височина: "100%",
 ширина: `${напредък}%`,
 Цвят на фона: "#90CAF9",
 borderRadius: "наследяват",
}
конст етикет = {
 подплата: "1рем",
 цвят: "#000000",
}

Променете връщащата част на компонента, за да включите стилове, както е показано по-долу:

<div style={контейнер}>
<div style={bar} role="прогрес лента"
 aria-valuenow={напредък}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={етикет} >{`${progress}%`}</span>
</div>
</div>

Изобразете лентата на напредъка по следния начин:

<ProgressBar progress={50}/>

Това показва лента за напредък с 50 процента завършено.

Изграждане на компоненти в React

Вече можете да създадете достъпна лента за напредъка с проценти, които можете да използвате повторно във всяка част от вашето приложение. С React можете да създавате независими UI компоненти като тези и да ги използвате като градивни елементи на сложно приложение.