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

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

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





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



МАКЕУСЕОФ ВИДЕО ДАНА

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

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





Ф4А611Д5Ц8А3832ЕД9АБ67ДБ1Б73ДА24ЕЕФ8631А

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

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



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

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

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

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



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

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



3А5А2А47553А9Б1Е6ЕБААФЕ0Е65ЕД45ЦЦЕ1Ц5ББ2

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

ЦБ91Ц07329Д9Д2А9Ф1АЕ877Ц5ФДЕЦФ9045636ЦБ

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

андроид телефон се не повезује са рачунаром
5248690Ц23107Е80Д7Д3ЕАБФАДД3ЕАЦА6БФФ45ЕА

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

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

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