LabeledValue

Grundlagen

Best Practices

• Wähle kurze, prägnante Labels, die den Wert eindeutig beschreiben.
• Nutze ein ColumnLayout, um mehrere LabeledValues nebeneinander darzustellen.
• Sortiere LabeledValues nach ihrer Wichtigkeit und bilde sinnvolle Gruppierungen.

Anwendung

Position

• Um viele Informationen übersichtlich darzustellen, verwende LabeledValues innerhalb eines ColumnLayouts.
• Achte auf ein übersichtliches Layout und stelle nicht zu viele Informationen in einer Zeile dar.
• Sortiere nach Priorität und bilde sinnvolle Gruppen (z. B. Name und Adresse).

Writing Guidelines

Label

• Achte darauf, dass das Label kurz (1-3 Wörter) und prägnant ist.
• Es sollte jederzeit vollständig sichtbar bleiben und eine einfache Sprache verwenden.

Playground

Verwende <LabeledValue />, um ein LabeledValue darzustellen. Das LabeledValue setzt sich aus einem Label und dem <Content /> zusammen.

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

<LabeledValue>
  <Label>Speicherplatz</Label>
  <Content>20 GB</Content>
</LabeledValue>

Kombiniere mit ...

Der Content-Bereich des LabeledValue kann entweder Text, InlineCode oder einen Link beinhalten. Jeder Content kann zudem durch einen CopyButton ergänzt werden.

InlineCode

Mit <InlineCode /> anstelle von <Content /> kann ein InlineCode angezeigt werden.

Link

Nutze einen <Link /> anstelle von <Content />, um einen Link anzuzeigen.

CopyButton

Verwende <CopyButton /> innerhalb des <LabeledValue />, um einen CopyButton am Ende des Contents anzuzeigen.

Properties