Sådan opretter du en tilgængelig statuslinje med React

Fremskridtsbjælker er gode til brugerengagement, fordi de giver et mål at nå. I stedet for at stirre på en webside, der venter på en ressource, ser du en statuslinje, der fyldes op. Statusindikatorer bør ikke være begrænset til kun seende brugere. Alle burde være i stand til at forstå din statuslinje med lethed.

Så hvordan bygger du en tilgængelig statuslinje med React?

oprette batchfil til at køre kommando

MAKEUSE AF DAGENS VIDEO

Opret en statuslinjekomponent

Opret en ny komponent kaldet ProgressBar.js og tilføj følgende kode:

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;

Det første div-element er containeren, og det andet div er den faktiske statuslinje. Spændelementet indeholder fremskridtslinjens procentdel.

Af tilgængelighedsformål har den anden div følgende attributter:

En rolle som statuslinje.
aria-valuenow for at angive den aktuelle værdi af statuslinjen.
aria-valuemin for at angive minimumsværdien af statuslinjen.
aria-valuemax for at angive den maksimale værdi af statuslinjen.

Attributterne aria-valuemin og aria-valuemax er ikke nødvendige, hvis statuslinjens maksimum- og minimumværdier er 0 og 100, da HTML er standard til disse værdier.

hvordan finder jeg mit grafikkort windows 10

Styling af statuslinjen

Du kan style statuslinjen ved hjælp af inline-stile eller en CSS-i-JS-bibliotek som stylede-komponenter . Begge disse fremgangsmåder giver en enkel måde at overføre rekvisitter fra komponenten til CSS.

Du har brug for denne funktionalitet, fordi bredden af statuslinjen afhænger af fremskridtsværdien, der er indgivet som rekvisitter.

Du kan bruge disse indlejrede stilarter:

403 forbudt, du har ikke tilladelse til at få adgang til / på denne server

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

Rediger returdelen af komponenten til at inkludere stilarter som vist nedenfor:

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

Gengiv statuslinjen sådan:

<ProgressBar progress={50}/>

Dette viser en statuslinje med 50 procent fuldført.

Bygningskomponenter i React

Du kan nu oprette en tilgængelig statuslinje med procenter, som du kan genbruge i enhver del af din applikation. Med React kan du oprette uafhængige UI-komponenter som disse og bruge dem som byggesten i en kompleks applikation.