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
Ukážka zobrazuje level indicator v najjednoduchšej forme, takže je dobre vidieť predvolené rozdelenie úrovní a ich čítanie.
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
bars
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe bars. |
| Atribút | bars |
| Typ | string |
| Predvolené | - |
colorize
| Popis | Určuje, či je voľba colorize zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | colorize |
| Typ | boolean |
| Predvolené | false |
level
| Popis | Nastavuje úroveň korekcie chýb. |
| Atribút | level |
| Typ | string |
| Predvolené | - |
reverse
| Popis | Určuje, či je voľba reverse zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | reverse |
| Typ | boolean |
| Predvolené | false |
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.