Rate
wje-rate slúži na zadanie aj zobrazenie hodnotenia. Komponent podporuje celé aj desatinné kroky, readonly režim, disabled stav a vlastné ikony.
Základné použitie
Najjednoduchší scenár je interaktívne hodnotenie s predvolenými hviezdičkami a maximom podľa atribútu max.
Predvolená hodnota
Atribút value nastavuje počiatočnú alebo aktuálnu hodnotu hodnotenia. Hodí sa pri editácii existujúceho hodnotenia aj pri read-only zobrazení.
Presnosť hodnotenia
Ak potrebujete polovice alebo iné menšie kroky, použite atribút precision. Výsledné hover aj click správanie sa potom zaokrúhľuje podľa nastavenej presnosti.
Read-only režim
Pri readonly zostáva hodnota viditeľná, ale používateľ ju už nemôže meniť. To je vhodné napríklad pri zobrazení už uloženého hodnotenia.
Disabled stav
Disabled stav blokuje interakciu aj hover feedback. Použite ho tam, kde je hodnotenie dočasne nedostupné alebo čaká na inú podmienku.
Kedy použiť
Použite wje-rate, keď používateľ hodnotí kvalitu, spokojnosť alebo preferenciu na malej škále.
Kedy nepoužiť
Nepoužívajte ho tam, kde je potrebný presný číselný vstup alebo keď škála nemá pre používateľa jasný význam.
Prístupnosť
Pri dôležitých rozhodnutiach doplňte hodnotenie aj textovým kontextom, aby používateľ rozumel škále aj aktuálnej hodnote. Readonly a disabled stav by mal byť zrozumiteľný aj bez hoveru.
Odporúčané postupy
- Držte konzistentný význam škály, napríklad 1 až 5, naprieč celou aplikáciou.
- Ak používate vlastné ikony cez
icons, zachovajte rovnakú vizuálnu logiku pre vyplnený aj nevyplnený stav. - Pri zobrazení uloženého hodnotenia zvážte readonly režim namiesto disabled, ak má byť hodnota stále dobre čitateľná.
Atribúty a vlastnosti
disabled
| Popis | Vypína používateľskú interakciu s komponentom. |
| Atribút | disabled |
| Typ | boolean |
| Predvolené | - |
icons
| Popis | Prepíše názvy ikon vykreslených pre jednotlivé kroky hodnotenia. |
| Atribút | icons |
| Typ | Array<string> |
| Predvolené | [star] |
max
| Popis | Nastavuje maximálny počet krokov hodnotenia vykreslených komponentom. |
| Atribút | max |
| Typ | number |
| Predvolené | - |
precision
| Popis | Nastavuje krok, po ktorom sa dá vyberať aj desatinné hodnotenie. |
| Atribút | precision |
| Typ | number |
| Predvolené | 1 |
readonly
| Popis | Zabráni používateľovi upravovať hodnotu. |
| Atribút | readonly |
| Typ | boolean |
| Predvolené | - |
value
| Popis | Nastavuje aktuálnu hodnotu hodnotenia. |
| Atribút | value |
| Typ | number |
| Predvolené | 0 |
Udalosti
Pre tento komponent nie sú dostupné žiadne udalosti.
Metódy
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS tieňové časti
| Názov | Popis |
|---|---|
native | Štýluje koreňovú shadow časť komponentu. |
CSS vlastné premenné
| Názov | Popis |
|---|---|
--wje-rate-gap | Vlastná CSS premenná, ktorá riadi gap. |
--wje-rate-color | Vlastná CSS premenná, ktorá riadi color. |
--wje-rate-selected-color | Vlastná CSS premenná, ktorá riadi selected color. |
Sloty
Pre tento komponent nie sú dostupné žiadne sloty.