Jak vytvořit přístupný ukazatel pokroku pomocí React

Ukazatele pokroku jsou skvělé pro zapojení uživatelů, protože poskytují cíl, kterého má být dosaženo. Místo abyste zírali na webovou stránku čekající na zdroj, uvidíte, jak se plní ukazatel průběhu. Ukazatele pokroku by se neměly omezovat pouze na vidící uživatele. Každý by měl být schopen snadno porozumět vašemu ukazateli pokroku.

Jak tedy pomocí Reactu vytvoříte přístupný ukazatel průběhu?

Vytvořte komponentu ukazatele průběhu

Vytvořte novou komponentu s názvem ProgressBar.js a přidejte následující kód:

konst ProgressBar = ({progress}) => {
vrátit se (
<div>
<div role="ukazatel průběhu"
 aria-valuenow={progress}
 aria-valuemin={0}
 aria-valuemax={100}>
<rozpětí>{`${progress}%`}</span>
</div>
</div>
 );
};
vývoznívýchozí Ukazatel průběhu;

První prvek div je kontejner a druhý prvek div je skutečný ukazatel průběhu. Prvek span obsahuje procento ukazatele průběhu.

Pro účely usnadnění má druhý div následující atributy:

• Role progressbaru.
• aria-valuenow k označení aktuální hodnoty ukazatele průběhu.
• aria-valuemin k označení minimální hodnoty ukazatele průběhu.
• aria-valuemax k označení maximální hodnoty ukazatele průběhu.

Atributy aria-valuemin a aria-valuemax nejsou nutné, pokud jsou maximální a minimální hodnoty ukazatele průběhu 0 a 100, protože HTML výchozí hodnoty tyto hodnoty.

Styling Progress Bar

Ukazatel průběhu můžete upravit pomocí vložených stylů nebo a Knihovna CSS-in-JS jako stylované komponenty. Oba tyto přístupy poskytují jednoduchý způsob předávání rekvizit z komponenty do CSS.

Tuto funkci potřebujete, protože šířka ukazatele průběhu závisí na hodnotě postupu předané jako rekvizity.

Můžete použít tyto vložené styly:

konst kontejner = {
 výška: 20,
 šířka: "100%",
 barva pozadí: "#fff",
 border Radius: 50,
 okraj: 50
}
konst pruh = {
 výška: "100%",
 šířka: `${progress}%`,
 barva pozadí: "#90CAF9",
 okrajRadius: "zdědit",
}
konst štítek = {
 vycpávka: "1rem",
 barva: "#000000",
}

Upravte návratovou část komponenty tak, aby zahrnovala styly, jak je znázorněno níže:

<div style={container}>
<div style={bar} role="ukazatel průběhu"
 aria-valuenow={progress}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={label} >{`${progress}%`}</span>
</div>
</div>

Vykreslete ukazatel průběhu takto:

<ProgressBar progress={50}/>

Zobrazí se indikátor průběhu s 50 procenty dokončení.

Stavební komponenty v Reactu

Nyní můžete vytvořit přístupný ukazatel průběhu s procenty, který můžete znovu použít v jakékoli části aplikace. S Reactem můžete vytvářet nezávislé komponenty uživatelského rozhraní, jako jsou tyto, a používat je jako stavební bloky komplexní aplikace.