mittwald Flow Logo

Components

LabeledValue

Das LabeledValue zeigt eine statische Information und setzt sie durch ein beschreibendes Label in den passenden Kontext.GitHub
20 GB

Playground

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

20 GB
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.

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

Link

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

MyServ-01
p-lol3qe.project.space

CopyButton

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

p-wut3uw
mysql-kq3v4g.ge-s-hopovh.db.project.host
p-lol3qe.project.space

Overview