Level Indicator
Komponent Level Indicator je element umožňujúci zobraziť úroveň alebo pokrok v procese. Môže byť použitý na zobrazenie úrovne nabitia batérie, pokroku používateľa alebo iných podobných úloh.
Základné použitie
Colorize
Pridaním atribútu colorize sa pruhy indikátora sfarbia podľa úrovne (nízka, stredná, vysoká).
Sírka pruhov indikátora
Nastavením CSS premennej --wje-level-indicator-width na ľubovoľnú hodnotu je možné nastaviť šírku pruhov indikátora.
Reverse
Pridaním atribútu reverse sa pruhy indikátora zobrazia v opačnom poradí.
Kedy použiť
Použite wje-level-indicator, keď potrebujete používateľovi okamžite komunikovať stav, výsledok akcie alebo ďalší krok.
Kedy nepoužiť
Nepoužívajte viacero konkurenčných feedback kanálov naraz pre jednu udalosť.
Prístupnosť
Status správy oznamujte cez vhodné ARIA live regióny a pri modálnych prvkoch spravujte fokus (open/close).
Odporúčané postupy
- Vyberte závažnosť správ (info/success/warning/error) podľa reálneho dopadu na používateľa.
- Pri blokujúcich akciách preferujte potvrdenie iba tam, kde hrozí nevratná zmena.
- Nastavte konzistentné timeouty, aby používateľ stihol správu prečítať.
Atribúty a vlastnosti
level
| Popis | Nastavuje úroveň korekcie chýb. |
| Atribút | level |
| Typ | number |
| Predvolené | - |
bars
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe bars. |
| Atribút | bars |
| Typ | number |
| Predvolené | - |
Udalosti
Pre tento komponent nie sú dostupné žiadne udalosti.
Metódy
updateBars
| Popis | Aktualizuje bars podľa najnovších údajov komponentu. |
| Signatúra | (level: number, bars: Array) => void |
getColor
| Popis | Vráti color z aktuálneho stavu komponentu. |
| Signatúra | (level: number, bars: number) => string ｜ undefined |
CSS tieňové časti
| Názov | Popis |
|---|---|
| `` | Štýluje shadow časť časť. |
CSS vlastné premenné
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Sloty
Pre tento komponent nie sú dostupné žiadne sloty.