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?

MAKEUSEOF VIDEO DNEVA

Ustvarite komponento vrstice napredka

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

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default 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.

kako narediti datoteko .bat za Windows 10

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:

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

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

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

Upodobite vrstico napredka takole:

<ProgressBar progress={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.