Cum se creează o bară de progres accesibilă cu React

Barele de progres sunt excelente pentru implicarea utilizatorilor, deoarece oferă un obiectiv de atins. În loc să vă uitați la o pagină web care așteaptă o resursă, vedeți o bară de progres care se umple. Barele de progres nu ar trebui să fie limitate doar la utilizatorii văzători. Toată lumea ar trebui să poată înțelege cu ușurință bara de progres.

Deci, cum construiești o bară de progres accesibilă cu React?

Creați o componentă bară de progres

Creați o nouă componentă numită ProgressBar.js și adăugați următorul cod:

const ProgressBar = ({progres}) => {
întoarcere (
<div>
<rol div="bara de progres"
 aria-valuenow={progres}
 aria-valuemin={0}
 aria-valuemax={100}>
<span>{`${progres}%`}</span>
</div>
</div>
 );
};





instagram viewer
exportMod implicit Bara de progres;

Primul element div este containerul, iar al doilea div este bara de progres reală. Elementul span deține procentul barei de progres.

Din motive de accesibilitate, al doilea div are următoarele atribute:

• Un rol de bară de progres.
• aria-valuenow pentru a indica valoarea curentă a barei de progres.
• aria-valuemin pentru a indica valoarea minimă a barei de progres.
• aria-valuemax pentru a indica valoarea maximă a barei de progres.

Atributele aria-valuemin și aria-valuemax nu sunt necesare dacă valorile maxime și minime ale barei de progres sunt 0 și 100, deoarece HTML este implicit la aceste valori.

Stilizarea barei de progres

Puteți stila bara de progres folosind stiluri inline sau a Bibliotecă CSS-in-JS ca și componentele stilate. Ambele abordări oferă o modalitate simplă de a trece recuzită de la componentă la CSS.

Aveți nevoie de această funcționalitate deoarece lățimea barei de progres depinde de valoarea de progres transmisă ca elemente de recuzită.

Puteți utiliza aceste stiluri inline:

const container = {
 inaltime: 20,
 lăţime: "100%",
 culoare de fundal: "#fff",
 BorderRadius: 50,
 marja: 50
}
const bara = {
 înălţime: "100%",
 lăţime: `${progres}%`,
 culoare de fundal: "#90CAF9",
 borderRadius: "moşteni",
}
const etichetă = {
 umplutura: "1rem",
 culoare: "#000000",
}

Modificați porțiunea de retur a componentei pentru a include stiluri, așa cum se arată mai jos:

<div style={container}>
<div style={bar} rol="bara de progres"
 aria-valuenow={progres}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={label} >{`${progres}%`}</span>
</div>
</div>

Redați bara de progres astfel:

<ProgressBar progress={50}/>

Aceasta afișează o bară de progres cu 50 la sută completă.

Componente de construcție în React

Acum puteți crea o bară de progres accesibilă cu procente pe care le puteți reutiliza în orice parte a aplicației dvs. Cu React, puteți crea componente independente de interfață de utilizator precum acestea și le puteți utiliza ca elemente de bază ale unei aplicații complexe.