Flow

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

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

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

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

<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>

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).
Dolce Vita
p-wut3uw
p-lol3qe.project.space
Dolce-Server-01
45.144.187.21
06.12.2023 um 11:40 Uhr

Do

Zeige die relevantesten LabeledValues zuerst an und bilde sinnvolle Gruppen.

06.12.2023 um 11:40 Uhr
p-wut3uw
45.144.187.21
Dolce-Server-01
Dolce Vita
p-lol3qe.project.space

Don't

Weniger relevante Informationen sollten nicht am Anfang stehen. Versuche außerdem, unausgeglichene Designs zu vermeiden.

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.
Feedback geben