Kako stvoriti pristupačnu traku napretka s Reactom

Trake napretka izvrsne su za angažman korisnika jer daju cilj koji treba postići. Umjesto buljenja u web stranicu koja čeka na resurs, vidite kako se traka napretka puni. Trake napretka ne bi trebale biti ograničene samo na korisnike koji vide. Svatko bi trebao moći s lakoćom razumjeti vašu traku napretka.

Dakle, kako izgraditi dostupnu traku napretka s Reactom?

Napravite komponentu trake napretka

Napravite novu komponentu pod nazivom ProgressBar.js i dodajte sljedeći kod:

konst ProgressBar = ({progress}) => {
povratak (
<div>
<div uloga="traka za napredak"
 aria-valuenow={napredak}
 aria-valuemin={0}
 aria-valuemax={100}>
<raspon>{`${progress}%`}</span>
</div>
</div>
 );
};
izvozzadano Traka za napredak;

Prvi div element je spremnik, a drugi div je stvarna traka napretka. Element raspona sadrži postotak trake napretka.

U svrhu pristupačnosti, drugi div ima sljedeće atribute:

• Uloga trake napretka.
• aria-valuenow za označavanje trenutne vrijednosti trake napretka.
• aria-valuemin za označavanje minimalne vrijednosti trake napretka.
• aria-valuemax za označavanje maksimalne vrijednosti trake napretka.

Atributi aria-valuemin i aria-valuemax nisu potrebni ako su maksimalne i minimalne vrijednosti trake napretka 0 i 100 budući da HTML postavlja te vrijednosti prema zadanim postavkama.

Stiliziranje trake napretka

Traku napretka možete stilizirati pomoću ugrađenih stilova ili a CSS-in-JS biblioteka poput stiliziranih komponenti. Oba ova pristupa pružaju jednostavan način prosljeđivanja rekvizita iz komponente u CSS.

Ova vam je funkcija potrebna jer širina trake napretka ovisi o vrijednosti napretka proslijeđenoj kao props.

Možete koristiti ove ugrađene stilove:

konst kontejner = {
 visina: 20,
 širina: "100%",
 boja pozadine: "#F F F",
 radijus granice: 50,
 margina: 50
}
konst traka = {
 visina: "100%",
 širina: `${progress}%`,
 boja pozadine: "#90CAF9",
 radijus granice: "naslijediti",
}
konst oznaka = {
 padding: "1rem",
 boja: "#000000",
}

Izmijenite povratni dio komponente tako da uključuje stilove kao što je prikazano u nastavku:

<div style={container}>
<div stil={bar} uloga="traka za napredak"
 aria-valuenow={napredak}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={oznaka} >{`${progress}%`}</span>
</div>
</div>

Prikazajte traku napretka ovako:

<ProgressBar napredak={50}/>

Ovo prikazuje traku napretka s 50 posto dovršenosti.

Izrada komponenti u Reactu

Sada možete stvoriti dostupnu traku napretka s postocima koje možete ponovno koristiti u bilo kojem dijelu svoje aplikacije. S Reactom možete stvoriti neovisne komponente korisničkog sučelja poput ovih i koristiti ih kao građevne blokove složene aplikacije.