Bewertung
Bewertungen geben Einblicke in die Meinungen und Erfahrungen anderer mit einem Produkt. Benutzer können auch Produkte bewerten, die sie gekauft haben.
Einfache Bewertungen
Customized ratings
Hier einige Beispiele zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der Überschreibungsdokumentationsseite.
Hover feedback
You can display a label on hover to help users pick the correct rating value. Die Demo verwendet die onChangeActive
Prop.
Poor+
<Rating
name="hover-feedback"
value={value}
precision={0.5}
onChange={(event, newValue) => {
setValue(newValue);
}}
onChangeActive={(event, newHover) => {
setHover(newHover);
}}
/>
{value !== null && <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>}
Half ratings
The rating can display any float number with the value
prop. Use the precision
prop to define the minimum increment value change allowed.
<Rating name="half-rating" defaultValue={2.5} precision={0.5} />
<Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
<Rating name="size-small" defaultValue={2} size="small" />
<Rating name="size-medium" defaultValue={2} />
<Rating name="size-large" defaultValue={2} size="large" />
Barrierefreiheit
(WAI Tutorial: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating)
Die Barrierefreiheit dieser Komponente setzt voraus:
- A radio group is used with its fields visually hidden. It contains six radio buttons, one for each star and another for 0 stars, which is checked by default. Make sure you are providing a
name
prop that is unique to the parent form. - The labels for the radio buttons contain actual text (“1 Star”, “2 Stars”, …), make sure you provide a
getLabelText
prop when the page language is not English.