LabeledValue

Das LabeledValue zeigt eine statische Information mit beschreibendem Label.

Speicherplatz

20 GB

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

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

Best Practices

Formuliere das Label kurz, prägnant und in einfacher Sprache, sodass es den Wert eindeutig beschreibt.
Stelle mehrere LabeledValues in einem ColumnLayout nebeneinander dar. Setze dabei nicht zu viele Informationen in eine Zeile.
Sortiere sie nach Wichtigkeit und fasse sie in sinnvolle Gruppen. Ein Beispiel ist die Gruppe aus Name und Adresse.

Kombiniere mit ...

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

ColumnLayout

Stelle mehrere LabeledValues in einem ColumnLayout nebeneinander dar, um zusammengehörige Informationen wie Name und Adresse zu gruppieren.

Vorname

Max

Nachname

Mustermann

Straße

Musterstraße 1

Ort

32423 Minden

InlineCode

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

Datenbankservermysql-kq3v4g.ge-s-hopovh.db.project.host

Link

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

ServerMyServ-01

CopyButton

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

Short-ID

p-wut3uw

Properties

Property	Type	Default	Description
`children`	`ReactNode`	-
`className`	`string`	-	The elements class name.

Components

Integrations