Rating

Verwende <Rating />, um ein Rating anzubieten. Um die Barrierefreiheit zu gewährleisten, wird in der Rating Component automatisch ein entsprechendes ARIA-Label für die einzelnen Rating-Stufen generiert.

import {
  Label,
  Rating,
} from "@mittwald/flow-react-components";

<Rating>
  <Label>Bewertung</Label>
</Rating>

Sizes

Anzahl der Segmente

Über maxValue wird die Anzahl der Segmente gesetzt. Ohne Angabe besteht ein Rating aus fünf Segmenten.

Readonly

Verwende isReadOnly, wenn du die Rating-Component nur zur Darstellung verwenden möchtest.

Alternative Icons

Über die Properties iconEmpty und iconFilled können benutzerdefinierte Icons gesetzt werden.

Icons pro Segment

Soll jede Stufe ihr eigenes Symbol haben, werden die Segmente einzeln über <RatingSegment /> in das Rating gelegt. Jedes Segment unterstützt eigene iconEmpty- und iconFilled-Icons und überschreibt damit die Icons des Ratings. Sind Segmente angegeben, bestimmen sie die Anzahl der Segmente.

Über aria-label lassen sich die automatischen Labels („3 von 5") pro Segment überschreiben.

Über fill wird zusätzlich gesteuert, welche Segmente als gefüllt dargestellt werden: Cumulative füllt alle Segmente bis zum Wert (Standard, das Verhalten einer Sternebewertung), Single nur das gewählte Segment.

Wie zufrieden bist du?(optional)

Kombiniere mit ...

BigNumber

Das Rating kann mit einer BigNumber kombiniert werden, um den Wert der BigNumber visuell besser einordnen zu können.

AccentBox

Zur visuellen Hervorhebung kann das Rating innerhalb einer AccentBox angezeigt werden.

Components

Integrations