Kako ustvariti dostopno vrstico napredka z React

Vrstice napredka so odlične za angažiranje uporabnikov, saj zagotavljajo cilj, ki ga je treba doseči. Namesto strmenja v spletno stran, ki čaka na vir, vidite, da se vrstica napredka polni. Vrstice napredka ne smejo biti omejene samo na videče uporabnike. Vsi bi morali zlahka razumeti vašo vrstico napredka.

Kako torej zgraditi dostopno vrstico napredka z Reactom?

Ustvarite komponento vrstice napredka

Ustvarite novo komponento z imenom ProgressBar.js in dodajte to kodo:

konst ProgressBar = ({napredek}) => {
vrnitev (
<div>
<div vloga="vrstica napredka"
 aria-valuenow={napredek}
 aria-valuemin={0}
 aria-valuemax={100}>
<razpon>{`${progress}%`}</span>
</div>
</div>
 );
};
izvozprivzeto ProgressBar;

Prvi element div je vsebnik, drugi element div pa dejanska vrstica napredka. Element razpona vsebuje odstotek vrstice napredka.

Za namene dostopnosti ima drugi div naslednje atribute:

• Vloga vrstice napredka.
• aria-valuenow za prikaz trenutne vrednosti vrstice napredka.
• aria-valuemin za prikaz najmanjše vrednosti vrstice napredka.
• aria-valuemax za prikaz največje vrednosti vrstice napredka.

Atributa aria-valuemin in aria-valuemax nista potrebna, če sta najvišja in najmanjša vrednost vrstice napredka 0 in 100, saj HTML privzeto uporablja te vrednosti.

Oblikovanje vrstice napredka

Vrstico napredka lahko oblikujete z vgrajenimi slogi ali a Knjižnica CSS-in-JS, kot so styled-components. Oba pristopa zagotavljata preprost način posredovanja rekvizitov iz komponente v CSS.

To funkcijo potrebujete, ker je širina vrstice napredka odvisna od vrednosti napredka, posredovane kot rekviziti.

Uporabite lahko te vgrajene sloge:

konst vsebnik = {
 višina: 20,
 premer: "100%",
 Barva ozadja: "#fff",
 polmer meje: 50,
 rob: 50
}
konst bar = {
 višina: "100%",
 premer: `${progress}%`,
 Barva ozadja: "#90CAF9",
 borderRadius: "dedovati",
}
konst oznaka = {
 oblazinjenje: "1rem",
 barva: "#000000",
}

Spremenite povratni del komponente, da bo vključeval sloge, kot je prikazano spodaj:

<div style={vsebnik}>
<div style={bar} role="vrstica napredka"
 aria-valuenow={napredek}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={label} >{`${progress}%`}</span>
</div>
</div>

Upodobite vrstico napredka takole:

<ProgressBar napredek={50}/>

To prikaže vrstico napredka s 50 odstotki dokončanega.

Gradnja komponent v Reactu

Zdaj lahko ustvarite dostopno vrstico napredka z odstotki, ki jih lahko znova uporabite v katerem koli delu svoje aplikacije. Z Reactom lahko ustvarite neodvisne komponente uporabniškega vmesnika, kot so te, in jih uporabite kot gradnike kompleksne aplikacije.