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
import {
  InlineCode,
  Label,
  LabeledValue,
} from "@mittwald/flow-react-components";

<LabeledValue>
  <Label>Datenbankserver</Label>
  <InlineCode>
    mysql-kq3v4g.ge-s-hopovh.db.project.host
  </InlineCode>
</LabeledValue>

Link

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

MyServ-01
p-lol3qe.project.space
import {
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<Row>
  <LabeledValue>
    <Label>Server</Label>
    <Link>MyServ-01</Link>
  </LabeledValue>

  <LabeledValue>
    <Label>Projektdomain</Label>
    <Link>
      <Text>p-lol3qe.project.space</Text>
      <IconExternalLink />
    </Link>
  </LabeledValue>
</Row>

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
import {
  Content,
  CopyButton,
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<Row>
  <LabeledValue>
    <Label>Short-ID</Label>
    <Content>p-wut3uw</Content>
    <CopyButton text="p-wut3uw" />
  </LabeledValue>

  <LabeledValue>
    <Label>Datenbankserver</Label>
    <Content>
      mysql-kq3v4g.ge-s-hopovh.db.project.host
    </Content>
    <CopyButton text="mysql-kq3v4g.ge-s-hopovh.db.project.host" />
  </LabeledValue>

  <LabeledValue>
    <Label>Projektdomain</Label>
    <Link>
      <Text>p-lol3qe.project.space</Text>
      <IconExternalLink />
    </Link>
    <CopyButton text="p-lol3qe.project.space" />
  </LabeledValue>
</Row>

Overview