Sterne-Bewertung
Rating-Anzeige 0–5 mit Teilsternen (Breiten-Maske, kein JS) und optionaler Anzahl — Farben über status.warning-/Sale-Tokens
Nutzt: ui.icon
Beispiele
4,7 von 5 mit Anzahl
3,5 von 5 (Teilstern)
Eingabe-Variante: Sterne klickbar (emittiert change)
Klein, ohne Anzahl
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| value * | number | — | Bewertung (0–5, Dezimalen erlaubt) |
| count | number | 0 | Anzahl Bewertungen (0 = ausblenden) |
| size | string: sm | md | "md" | Größe |
| interactive | boolean | false | Eingabe erlauben (Sterne klickbar) |
* Pflicht-Prop
Events & Slots
Events:
⚡ change — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--rating-border-strong | var(--color-border-strong) |
--rating-focus-ring-color | var(--focus-ring-color) |
--rating-focus-ring-offset | var(--focus-ring-offset) |
--rating-focus-ring-width | var(--focus-ring-width) |
--rating-radius-sm | var(--radius-sm) |
--rating-status-warning | var(--color-status-warning) |
--rating-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
color.border.strongcolor.status.warningcolor.text.mutedfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultradius.smsize.3text.sm