Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.
Уверите се да траке напретка ваше веб апликације изгледају добро и да их сви могу користити.
Траке напретка су одличне за ангажовање корисника јер пружају циљ који треба постићи. Уместо да буљите у веб страницу која чека на ресурс, видите како се трака напретка попуњава. Траке напретка не би требало да буду ограничене само на кориснике који виде. Сви би требали бити у могућности да с лакоћом разумеју вашу траку напретка.
Дакле, како да направите приступачну траку напретка помоћу Реацт-а?
Направите компоненту траке напретка
Направите нову компоненту под називом ПрогрессБар.јс и додајте следећи код:
конст ПрогрессБар = ({прогресс}) => {
повратак (
<див>
<див улога="прогрес бар"
ариа-валуенов={напредак}
ариа-валуемин={0}
ариа-валуемак={100}>
<спан>{`${прогресс}%`}</span>
</div>
</div>
);
};
извозУобичајено Прогрес бар;
Први елемент див је контејнер, а други див је стварна трака напретка. Елемент спан садржи проценат траке напретка.
У сврху приступачности, други див има следеће атрибуте:
- Улога траке напретка.
- ариа-валуенов да укаже на тренутну вредност траке напретка.
- ариа-валуемин за означавање минималне вредности траке напретка.
- ариа-валуемак да укаже на максималну вредност траке напретка.
Атрибути ариа-валуемин и ариа-валуемак нису неопходни ако су максималне и минималне вредности траке напретка 0 и 100 пошто ХТМЛ подразумевано користи ове вредности.
Обликовање траке напретка
Можете да стилизујете траку напретка користећи уметнуте стилове или а ЦСС-ин-ЈС библиотека попут стилизованих компоненти. Оба ова приступа обезбеђују једноставан начин преношења пропс-а из компоненте у ЦСС.
Потребна вам је ова функционалност јер ширина траке напретка зависи од вредности напретка која је прослеђена као пропс.
Можете користити ове уграђене стилове:
конст контејнер = {
висина: 20,
ширина: "100%",
боја позадине: "#ффф",
радијус границе: 50,
маргина: 50
}конст бар = {
висина: "100%",
ширина: `${прогресс}%`,
боја позадине: "#90ЦАФ9",
бордерРадиус: "наследити",
}
конст ознака = {
паддинг: "1рем",
боја: "#000000",
}
Измените повратни део компоненте тако да укључује стилове као што је приказано у наставку:
<див стиле={контејнер}>
<див стиле={бар} роле="прогрес бар"
ариа-валуенов={напредак}
ариа-валуемин={0}
ариа-валуемак={100}>
<спан стиле={лабел} >{`${прогресс}%`}</span>
</div>
</div>
Приказ траке напретка овако:
<ПрогрессБар напредак={50}/>
Ово приказује траку напретка са 50 посто завршених.
Компоненте изградње у Реацт-у
Сада можете да креирате приступачну траку напретка са процентима које можете поново користити у било ком делу ваше апликације. Са Реацт-ом можете креирати независне компоненте корисничког интерфејса попут ових и користити их као градивне блокове сложене апликације.
