Kā izveidot pieejamu progresa joslu, izmantojot React

Progresa joslas ir lieliski piemērotas lietotāju iesaistīšanai, jo tās nodrošina sasniedzamo mērķi. Tā vietā, lai skatītos uz tīmekļa lapu, kas gaida kādu resursu, jūs redzat, ka progresa josla aizpildās. Progresa joslas nedrīkst būt ierobežotas tikai ar redzīgiem lietotājiem. Ikvienam ir jāspēj viegli saprast jūsu progresa joslu.

Tātad, kā izveidot pieejamu progresa joslu, izmantojot React?

Izveidojiet progresa joslas komponentu

Izveidojiet jaunu komponentu ar nosaukumu ProgressBar.js un pievienojiet šādu kodu:

konst ProgressBar = ({progress}) => {
atgriezties (
<div>
<div loma="progresa josla"
 aria-valuenow={progress}
 aria-valuemin={0}
 aria-valuemax={100}>
<span>{`${progress}%`}</span>
</div>
</div>
 );
};
eksportētnoklusējuma ProgressBar;

Pirmais div elements ir konteiners, bet otrais div ir faktiskā norises josla. Elements span satur progresa joslas procentuālo daļu.

Pieejamības nolūkos otrajam div ir šādi atribūti:

• Progresa joslas loma.
• aria-valuenow, lai norādītu progresa joslas pašreizējo vērtību.
• aria-valuemin, lai norādītu progresa joslas minimālo vērtību.
• aria-valuemax, lai norādītu progresa joslas maksimālo vērtību.

Atribūti aria-valuemin un aria-valuemax nav nepieciešami, ja progresa joslas maksimālās un minimālās vērtības ir 0 un 100, jo HTML pēc noklusējuma ir šīs vērtības.

Progresa joslas stils

Varat veidot progresa joslu, izmantojot iekļautos stilus vai a CSS-in-JS bibliotēka, piemēram, stilizēti komponenti. Abas šīs pieejas nodrošina vienkāršu veidu, kā pārsūtīt rekvizītus no komponenta uz CSS.

Šī funkcionalitāte ir nepieciešama, jo progresa joslas platums ir atkarīgs no progresa vērtības, kas tiek nodota kā rekvizīti.

Varat izmantot šos iekļautos stilus:

konst konteiners = {
 augstums: 20,
 platums: "100%",
 fona krāsa: "#fff",
 apmales rādiuss: 50,
 starpība: 50
}
konst josla = {
 augstums: "100%",
 platums: `${progress}%`,
 fona krāsa: "#90CAF9",
 apmales rādiuss: "mantot",
}
konst etiķete = {
 polsterējums: "1 rem",
 krāsa: "#000000",
}

Modificējiet komponenta atgriešanās daļu, lai iekļautu stilus, kā parādīts tālāk:

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

Atveidojiet progresa joslu šādi:

<ProgressBar progress={50}/>

Tiek parādīta progresa josla ar 50 procentiem pabeigtu.

Ēkas sastāvdaļas programmā React

Tagad varat izveidot pieejamu norises joslu ar procentiem, ko varat atkārtoti izmantot jebkurā lietojumprogrammas daļā. Izmantojot React, varat izveidot neatkarīgus lietotāja interfeisa komponentus, piemēram, šos, un izmantot tos kā sarežģītas lietojumprogrammas sastāvdaļas.