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.

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

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 = ({haladás}) => {
Visszatérés (
<div>
<div role="fejlődésmutató"
 aria-valuenow={haladás}





instagram viewer


 aria-valumin={0}
 aria-valuemax={100}>
<span>{`${progress}%`}</span>
</div>
</div>
 );
};
exportalapértelmezett Fejlődésmutató;

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 konténer = {
 magasság: 20,
 szélesség: "100%",
 háttérszín: "#fff",
 határsugár: 50,
 margó: 50
}
const bár = {
 magasság: "100%",
 szélesség: `${haladás}%`,
 háttérszín: "#90CAF9",
 határsugár: "örököl",
}
const címke = {
 párnázás: "1 rem",
 szín: "#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="fejlődésmutató"
 aria-valuenow={haladás}
 aria-valumin={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.