mittwald Flow Logo

Components

Rating

Die Rating Component dient zur visuellen Darstellung einer Bewertungsskala von 0 bis 5 Sternen. Sie wird häufig eingesetzt, um Bewertungen auf einen Blick verständlich zu machen.GitHub

Playground

Verwende <Rating />, um ein Rating darzustellen. Um die Barrierefreiheit zu gewährleisten, wird in der Rating Component automatisch ein entsprechendes ARIA-Label generiert.

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

<Rating value={2} />

Sizes

Es stehen die Größen Medium oder Small zur Verfügung.

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

<Column>
  <Rating value={2} />
  <Rating size="s" value={2} />
</Column>

Kombiniere mit ...

BigNumber

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

80%Performance
import {
  BigNumber,
  Flex,
  Rating,
  Text,
} from "@mittwald/flow-react-components";

<Flex direction="column" gap="s" align="center">
  <BigNumber>
    <Text>80%</Text>
    <Text>Performance</Text>
  </BigNumber>
  <Rating value={4} />
</Flex>

AccentBox

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

250 msDateioperationen
Geringer Optimierungsbedarf
100 msServeroperationen
Optimierungsbedarf
import {
  AccentBox,
  BigNumber,
  ColumnLayout,
  Flex,
  Rating,
  Text,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <AccentBox>
    <Flex direction="column" gap="s" align="center">
      <BigNumber>
        <Text>250 ms</Text>
        <Text>Dateioperationen</Text>
      </BigNumber>
      <Rating value={4} />
      <Text>
        <small>Geringer Optimierungsbedarf</small>
      </Text>
    </Flex>
  </AccentBox>
  <AccentBox>
    <Flex direction="column" gap="xs" align="center">
      <BigNumber>
        <Text>100 ms</Text>
        <Text>Serveroperationen</Text>
      </BigNumber>
      <Rating value={2} />
      <Text>
        <small>Optimierungsbedarf</small>
      </Text>
    </Flex>
  </AccentBox>
</ColumnLayout>

Overview