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?

kako igrati video igre za život

MAKEUSEOF VIDEO DANA

Napravite komponentu trake napretka

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

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 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.

kako napraviti detaljnu umjetnost piksela

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:

kako popraviti mrtve piksele na LED televizoru

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", 
}

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

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

Prikazajte traku napretka ovako:

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