Ako vytvoriť prístupný ukazovateľ pokroku pomocou React

Ukazovatele pokroku sú skvelé na zapojenie používateľov, pretože poskytujú cieľ, ktorý sa má dosiahnuť. Namiesto toho, aby ste sa pozerali na webovú stránku čakajúcu na zdroj, uvidíte, ako sa zapĺňa indikátor priebehu. Ukazovatele pokroku by sa nemali obmedzovať len na vidiacich používateľov. Každý by mal byť schopný ľahko porozumieť vášmu indikátoru pokroku.

Ako si teda pomocou Reactu vytvoríte prístupný ukazovateľ priebehu?

Vytvorte komponent ukazovateľa priebehu

Vytvorte nový komponent s názvom ProgressBar.js a pridajte nasledujúci kód:

konšt ProgressBar = ({progress}) => {
vrátiť (
<div>
<div rola="ukazateľ postupu"
 aria-valuenow={pokrok}
 aria-valuemin={0}
 aria-valuemax={100}>
<rozpätie>{`${progress}%`}</span>
</div>
</div>
 );
};





instagram viewer
exportpredvolená Ukazateľ postupu;

Prvý prvok div je kontajner a druhý prvok div je skutočný indikátor priebehu. Prvok span obsahuje percentá indikátora priebehu.

Na účely prístupnosti má druhý div tieto atribúty:

• Úloha ukazovateľa pokroku.
• aria-valuenow na označenie aktuálnej hodnoty indikátora priebehu.
• aria-valuemin na označenie minimálnej hodnoty indikátora priebehu.
• aria-valuemax na označenie maximálnej hodnoty indikátora priebehu.

Atribúty aria-valuemin a aria-valuemax nie sú potrebné, ak sú maximálne a minimálne hodnoty indikátora priebehu 0 a 100, pretože HTML je predvolené na tieto hodnoty.

Úprava štýlu lišty pokroku

Ukazovateľ priebehu môžete upraviť pomocou vložených štýlov alebo a Knižnica CSS-in-JS ako štylizované komponenty. Oba tieto prístupy poskytujú jednoduchý spôsob odovzdávania rekvizít z komponentu do CSS.

Túto funkciu potrebujete, pretože šírka indikátora priebehu závisí od hodnoty postupu odovzdanej ako rekvizita.

Môžete použiť tieto vložené štýly:

konšt kontajner = {
 výška: 20,
 šírka: "100%",
 farba pozadia: "#fff",
 Polomer okraja: 50,
 okraj: 50
}
konšt bar = {
 výška: "100%",
 šírka: `${progress}%`,
 farba pozadia: "#90CAF9",
 border Radius: "dediť",
}
konšt štítok = {
 vypchávka: "1rem",
 farba: "#000000",
}

Upravte návratovú časť komponentu tak, aby zahŕňala štýly, ako je uvedené nižšie:

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

Vykreslite indikátor priebehu takto:

<ProgressBar progress={50}/>

Zobrazí sa indikátor priebehu s 50 percentami dokončenia.

Stavebné komponenty v Reacte

Teraz môžete vytvoriť prístupný indikátor priebehu s percentami, ktoré môžete znova použiť v ktorejkoľvek časti aplikácie. S Reactom môžete vytvárať nezávislé komponenty používateľského rozhrania, ako sú tieto, a používať ich ako stavebné bloky komplexnej aplikácie.