Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.
Sørg for, at din webapps statuslinjer ser gode ud og kan bruges af alle.
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?
Opret en statuslinjekomponent
Opret en ny komponent kaldet ProgressBar.js og tilføj følgende kode:
konst ProgressBar = ({progress}) => {
Vend tilbage (
<div>
<div rolle="statuslinje"
aria-valuenow={fremskridt}
aria-valuemin={0}
aria-valuemax={100}>
<span>{`${progress}%`}</span>
</div>
</div>
);
};
eksportStandard 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.
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:
konst beholder = {
højde: 20,
bredde: "100%",
baggrundsfarve: "#fff",
borderRadius: 50,
margin: 50
}konst bar = {
højde: "100%",
bredde: `${progress}%`,
baggrundsfarve: "#90CAF9",
borderRadius: "arve",
}
konst etiket = {
polstring: "1 rem",
farve: "#000000",
}
Rediger returdelen af komponenten til at inkludere stilarter som vist nedenfor:
<div style={container}>
<div style={bar} rolle="statuslinje"
aria-valuenow={fremskridt}
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.
