Verwendung
Verwendung
- Kann überall dort eingesetzt werden, wo Produkte oder Dienstleistungen präsentiert werden und eine Bewertung für den Nutzer hilfreich ist.
- Das Rating zeigt die durchschnittliche Nutzerbewertung aller abgegebenen Ratings an.
- Besteht immer aus fünf Sternen. Die Sterne können komplett farbig, zur Hälfte farbig oder als nur als Outline dargestellt werden.
- Hinter den Sternen kann die durchschnittliche Bewertung und die Anzahl der abgegebenen Bewertungen als Text dargestellt werden.
Typen
Das Rating kann in zwei Größen eingesetzt werden: Small und Large und kann jeweils auch um ein Label ergänzt werden. Da über das Rating auch ein Rating gesetzt werden kann, ist der Typ "Selection" zu betrachten.
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
size | string | undefined | Size of Rating |
variant | string | undefined | Variant of Rating |
link | string | undefined | Link to Rating |
hasLabel | boolean | false | Label of Rating |
amountOfStars | number | 5 | Amount of Stars |
rating | number | 0 | Average Rating |
completedAmount | number | 45 | Amount of completed ratings |
iconFull | string | "nosafe-star-fill" | Icon to Display |
iconHalf | string | "nosafe-star-half" | Icon to Display |
iconEmpty | string | "nosafe-star" | Icon to Display |
disabled | boolean | false | Disabled representation of rating elements |
style | string | undefined | Additional css styles |
Events
| Name | Description |
|---|---|
change | |
not | |
click | |
keypress |
Beispiele
Rating, small
Empfohlen für Section Reviews and Ratings (Product Detail Page)
Rating, large
Empfohlen für Section Reviews and Ratings (Product Detail Page)
Rating with label, small
Empfohlen für Product Teaser und Product Slider Das Label besteht aus zwei Bereichen:
- Bold Text: durchschnittlichen Bewertung mit einer Kommastelle
- Regular Text in Klammern: Anzahl der abgegeben Ratings
Rating with label, large
Empfohlen für Section Reviews and Ratings (Product Detail Page)
Rating, selection large
Empfohlen für das Bewerten von Produkten. Einzelne Stars können ausgewählt werden, um so eine Bewertung abzugeben.
Rating, selection small
Variant Display
Empfohlen für readonly Modus ohne Link
Variant Link, disabled
Variant Link, disabled, large
Variant Link, disabled, labeled
Variant Link, disabled, labeled, large
Do's and Don'ts
Do
Rating im Product Teaser
Do
Rating im Product Slider
Do
Reviews & Rating Section (Product Detail Page)
Don't
Rating darf nicht in anderen Farben eingesetzt werden.