Како направити приступачну траку напретка помоћу Реацт-а

Траке напретка су одличне за ангажовање корисника јер пружају циљ који треба постићи. Уместо да буљите у веб страницу која чека на ресурс, видите како се трака напретка попуњава. Траке напретка не би требало да буду ограничене само на кориснике који виде. Сви би требали бити у могућности да с лакоћом разумеју вашу траку напретка.

Дакле, како да направите приступачну траку напретка помоћу Реацт-а?

Направите компоненту траке напретка

Направите нову компоненту под називом ПрогрессБар.јс и додајте следећи код:

конст ПрогрессБар = ({прогресс}) => {
повратак (
<див>
<див улога="прогрес бар"
 ариа-валуенов={напредак}
 ариа-валуемин={0}
 ариа-валуемак={100}>
<спан>{`${прогресс}%`}</span>
</div>
</div>
 );
};
извозУобичајено Прогрес бар;

Први елемент див је контејнер, а други див је стварна трака напретка. Елемент спан садржи проценат траке напретка.

У сврху приступачности, други див има следеће атрибуте:

• Улога траке напретка.
• ариа-валуенов да укаже на тренутну вредност траке напретка.
• ариа-валуемин за означавање минималне вредности траке напретка.
• ариа-валуемак да укаже на максималну вредност траке напретка.

Атрибути ариа-валуемин и ариа-валуемак нису неопходни ако су максималне и минималне вредности траке напретка 0 и 100 пошто ХТМЛ подразумевано користи ове вредности.

Обликовање траке напретка

Можете да стилизујете траку напретка користећи уметнуте стилове или а ЦСС-ин-ЈС библиотека попут стилизованих компоненти. Оба ова приступа обезбеђују једноставан начин преношења пропс-а из компоненте у ЦСС.

Потребна вам је ова функционалност јер ширина траке напретка зависи од вредности напретка која је прослеђена као пропс.

Можете користити ове уграђене стилове:

конст контејнер = {
 висина: 20,
 ширина: "100%",
 боја позадине: "#ффф",
 радијус границе: 50,
 маргина: 50
}
конст бар = {
 висина: "100%",
 ширина: `${прогресс}%`,
 боја позадине: "#90ЦАФ9",
 бордерРадиус: "наследити",
}
конст ознака = {
 паддинг: "1рем",
 боја: "#000000",
}

Измените повратни део компоненте тако да укључује стилове као што је приказано у наставку:

<див стиле={контејнер}>
<див стиле={бар} роле="прогрес бар"
 ариа-валуенов={напредак}
 ариа-валуемин={0}
 ариа-валуемак={100}>
<спан стиле={лабел} >{`${прогресс}%`}</span>
</div>
</div>

Приказ траке напретка овако:

<ПрогрессБар напредак={50}/>

Ово приказује траку напретка са 50 посто завршених.

Компоненте изградње у Реацт-у

Сада можете да креирате приступачну траку напретка са процентима које можете поново користити у било ком делу ваше апликације. Са Реацт-ом можете креирати независне компоненте корисничког интерфејса попут ових и користити их као градивне блокове сложене апликације.