Skip to main content

Rate

shadow

The wje-rate is used to both enter and display the rating. The component supports integer and decimal steps, readonly mode, disabled state and custom icons.

Basic use​

The simplest scenario is an interactive rating with default stars and a maximum according to the max attribute.

Default value​

The value attribute sets the initial or current value of the evaluation. It is useful when editing an existing rating as well as for read-only views.

Accuracy of assessment​

If you need halves or other smaller increments, use the precision attribute. The resulting hover and click behavior is then rounded according to the set precision.

Read-only mode​

With readonly, the value remains visible, but the user can no longer change it. This is useful, for example, when displaying an already saved evaluation.

Disabled status​

Disabled state blocks both interaction and hover feedback. Use it where the rating is temporarily unavailable or pending another condition.

When to use​

Use wje-rate when the user rates quality, satisfaction or preference on a small scale.

When not to use​

Do not use it where precise numerical input is required or where the scale has no clear meaning to the user.

Accessibility​

For important decisions, supplement the assessment with textual context so that the user understands both the scale and the actual value. Readonly and disabled status should be understandable even without hover.

  • Keep the meaning of the scale consistent, such as 1 to 5, across the entire application.
  • If you use custom icons via icons, keep the same visual logic for both filled and unfilled state.
  • When displaying a saved rating, consider readonly mode instead of disabled if the value is still to be easily readable.

Attributes and properties​

disabled​

PopisVypína používateľskú interakciu s komponentom.
Atribútdisabled
Typboolean
Predvolené-

icons​

PopisPrepíše názvy ikon vykreslených pre jednotlivé kroky hodnotenia.
Atribúticons
TypArray<string>
Predvolené[star]

max​

PopisNastavuje maximálny počet krokov hodnotenia vykreslených komponentom.
Atribútmax
Typnumber
Predvolené-

precision​

PopisNastavuje krok, po ktorom sa dá vyberať aj desatinné hodnotenie.
Atribútprecision
Typnumber
Predvolené1

readonly​

PopisZabráni používateľovi upravovať hodnotu.
Atribútreadonly
Typboolean
Predvolené-

value​

PopisNastavuje aktuálnu hodnotu hodnotenia.
Atribútvalue
Typnumber
Predvolené0

Events​

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods​

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts​

NázovPopis
nativeŠtýluje koreňovú shadow časť komponentu.

CSS custom variables​

NázovPopis
--wje-rate-gapVlastná CSS premenná, ktorá riadi gap.
--wje-rate-colorVlastná CSS premenná, ktorá riadi color.
--wje-rate-selected-colorVlastná CSS premenná, ktorá riadi selected color.

Slots​

Pre tento komponent nie sú dostupné žiadne sloty.

Content