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?

VYUŽITIE VIDEA DŇA

Vytvorte komponent ukazovateľa priebehu

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

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;

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:

ako odstrániť disk Google z systému Windows

Ú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:

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

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

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        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.

najlepšia aplikácia reč na text pre Android 2018

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.