Hogyan hozzunk létre akadálymentesített folyamatjelzőt a React segítségével

A folyamatjelző sávok kiválóan alkalmasak a felhasználók elköteleződésére, mert elérendő célt biztosítanak. Ahelyett, hogy egy erőforráson várakozó weboldalt bámulna, egy folyamatjelző sáv megtelik. A folyamatjelző sávokat nem szabad csak látó felhasználókra korlátozni. Mindenkinek képesnek kell lennie arra, hogy könnyen megértse a folyamatjelző sávot.

hogyan szabadítsunk fel helyet az Apple Watchon

Tehát hogyan építhet fel egy hozzáférhető folyamatjelző sávot a React segítségével?

MAKEUSEOF A NAP VIDEÓJA

Hozzon létre egy folyamatjelző komponenst

Hozzon létre egy új összetevőt ProgressBar.js néven, és adja hozzá a következő kódot:

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;

Az első div elem a tároló, a második div pedig a tényleges folyamatjelző sáv. A span elem a folyamatjelző sáv százalékos értékét tartalmazza.

Hozzáférhetőségi okokból a második div a következő attribútumokkal rendelkezik:

A folyamatjelző szerepe.
aria-valuenow, hogy jelezze a folyamatjelző sáv aktuális értékét.
aria-valuemin a folyamatjelző sáv minimális értékének jelzésére.
aria-valuemax a folyamatjelző sáv maximális értékének jelzésére.

Az aria-valuemin és aria-valuemax attribútumok nem szükségesek, ha a folyamatjelző sáv maximális és minimális értéke 0 és 100, mivel a HTML alapértelmezés szerint ezek az értékek.

A folyamatjelző sáv stílusa

A folyamatjelző sáv stílusát beépített stílusok vagy a CSS-in-JS könyvtár, mint a stílusos összetevők . Mindkét megközelítés egyszerű módot biztosít a kellékek átadására az összetevőből a CSS-be.

Erre a funkcióra azért van szükség, mert a folyamatjelző sáv szélessége a kellékként átadott folyamatértéktől függ.

Ezeket a soron belüli stílusokat használhatja:

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

Módosítsa az összetevő visszatérési részét, hogy stílusokat tartalmazzon az alábbiak szerint:

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

Jelenítse meg a folyamatjelző sávot a következőképpen:

<ProgressBar progress={50}/>

Ez egy folyamatjelző sávot jelenít meg, 50 százalékos készséggel.

Építési alkatrészek a Reactban

Mostantól létrehozhat egy hozzáférhető folyamatjelző sávot százalékokkal, amelyeket újra felhasználhat az alkalmazás bármely részében. A React segítségével ezekhez hasonló független felhasználói felület-összetevőket hozhat létre, és használhatja őket egy összetett alkalmazás építőelemeiként.