mittwald Flow Logo

Components

Section

Eine Section erhöht die Übersichtlichkeit, indem sie den Content in vertikale Teilbereiche mit festen Abständen gliedert. Zwischen mehreren Sections wird automatisch ein Separator eingefügt, um die Bereiche optisch zu trennen.GitHub

Newsletter

Kommende Releases, neue Features und Tipps rund um dein Hosting – wir bringen dir das Wichtigste in dein Postfach. Abonniere unseren Newsletter und bleib auf dem Laufenden.

Playground

Verwende <Section />, um eine Section darzustellen. Sie sorgt automatisch für feste Abstände zwischen den darin platzierten Elementen.

Newsletter

Kommende Releases, neue Features und Tipps rund um dein Hosting – wir bringen dir das Wichtigste in dein Postfach. Abonniere unseren Newsletter und bleib auf dem Laufenden.
import {
  Heading,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Heading>Newsletter</Heading>
  <Text>
    Kommende Releases, neue Features und Tipps rund um dein
    Hosting – wir bringen dir das Wichtigste in dein
    Postfach. Abonniere unseren Newsletter und bleib auf dem
    Laufenden.
  </Text>
</Section>

Mehrere Sections

Wenn mehrere Sections untereinander platziert werden, werden sie automatisch durch einen Separator getrennt.

Datenbanken

Eine Datenbank, die mit einer App verknüpft ist, kann nicht gelöscht werden. Die App nutzt immer die verknüpfte Datenbank.

Cronjobs

Ein Cronjob ist immer fest einer App zugeordnet, du kannst ihn unter dem Menüpunkt Cronjobs bearbeiten und löschen.
import {
  Button,
  Header,
  Heading,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<>
  <Section>
    <Header>
      <Heading>Datenbanken</Heading>
      <Button>Datenbank verknüpfen</Button>
    </Header>
    <Text>
      Eine Datenbank, die mit einer App verknüpft ist, kann
      nicht gelöscht werden. Die App nutzt immer die
      verknüpfte Datenbank.
    </Text>
  </Section>
  <Section>
    <Heading>Cronjobs</Heading>
    <Text>
      Ein Cronjob ist immer fest einer App zugeordnet, du
      kannst ihn unter dem Menüpunkt Cronjobs bearbeiten und
      löschen.
    </Text>
  </Section>
</>

Sub-Headings

Sections beginnen in der Regel mit einer H2-Heading. Wenn eine feinere Unterteilung nötig ist, können Headings auf niedrigerem Level direkt in der Section platziert werden. Zur optischen Verdeutlichung erhalten Sub-Headings in der Größe H3 automatisch einen größeren Abstand zum darüberliegenden Content.

DNS Verwaltung

Da du externe Nameserver nutzt, empfehlen wir dir folgende Records bei deinem Provider einzutragen.

A-Record

12.123.123.12
import {
  Heading,
  InlineCode,
  Label,
  LabeledValue,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Heading>DNS Verwaltung</Heading>
  <Text>
    Da du externe Nameserver nutzt, empfehlen wir dir
    folgende Records bei deinem Provider einzutragen.
  </Text>
  <Heading level={3}>A-Record</Heading>
  <LabeledValue>
    <Label>IPv4-Adresse</Label>
    <InlineCode>12.123.123.12</InlineCode>
  </LabeledValue>
</Section>

SectionAction

Die Section verfügt in der rechten oberen Ecke über einen Bereich für Actions – die sogenannte SectionAction. Dort können ein Link, ein Switch, ein oder zwei Buttons oder eine Kombination dieser Components verwendet werden.

Newsletter

Zur Anmeldung
Kommende Releases, neue Features und Tipps rund um dein Hosting – wir bringen dir das Wichtigste in dein Postfach. Abonniere unseren Newsletter und bleib auf dem Laufenden.
import {
  Header,
  Heading,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>Newsletter</Heading>
    <Link href="#">Zur Anmeldung</Link>
  </Header>
  <Text>
    Kommende Releases, neue Features und Tipps rund um dein
    Hosting – wir bringen dir das Wichtigste in dein
    Postfach. Abonniere unseren Newsletter und bleib auf dem
    Laufenden.
  </Text>
</Section>

Autoresponder

Aktivieren
Lasse den Autoresponder für dich arbeiten. Er kann automatisch auf eingehende E-Mails antworten.
import {
  Header,
  Heading,
  Section,
  Switch,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>Autoresponder</Heading>
    <Switch>Aktivieren</Switch>
  </Header>
  <Text>
    Lasse den Autoresponder für dich arbeiten. Er kann
    automatisch auf eingehende E-Mails antworten.
  </Text>
</Section>

Es können maximal zwei Buttons nebeneinander angezeigt werden. Werden mehr als zwei Aktionen benötigt, erhält die Hauptaktion einen eigenen Button, während alle weiteren in ein ContextMenu verschoben werden.

Mein Projekt

Dolce Vita
p-lol3qe
p-lol3qe.project.space
import {
  Button,
  ColumnLayout,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  CopyButton,
  Header,
  Heading,
  IconContextMenu,
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  MenuItem,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>Mein Projekt</Heading>

    <ContextMenuTrigger>
      <Button
        variant="soft"
        color="secondary"
        aria-label="Weitere Aktionen anzeigen"
      >
        <IconContextMenu />
      </Button>
      <ContextMenu aria-label="Weitere Aktionen">
        <MenuItem>Datenbank migrieren</MenuItem>
        <MenuItem>Volume migrieren</MenuItem>
      </ContextMenu>
    </ContextMenuTrigger>

    <Button color="danger">Deaktivieren</Button>
  </Header>

  <ColumnLayout>
    <LabeledValue>
      <Label>Projektname</Label>
      <Content>Dolce Vita</Content>
    </LabeledValue>
    <LabeledValue>
      <Label>Short-ID</Label>
      <Content>p-lol3qe</Content>
      <CopyButton text="p-lol3qe" />
    </LabeledValue>
    <LabeledValue>
      <Label>Projektdomain</Label>
      <Link>
        <Text>p-lol3qe.project.space</Text>
        <IconExternalLink />
      </Link>
      <CopyButton text="p-lol3qe.project.space" />
    </LabeledValue>
  </ColumnLayout>
</Section>

Kombiniere mit ...

AlertBadge und Badge

Die Heading kann mit einem AlertBadge oder einem Badge ergänzt werden. Dadurch wird der User schnell über den Status oder über Metadaten des Inhalts einer Section informiert.

Mein Projekt
Deaktiviert

Dolce Vita
p-lol3qe
p-lol3qe.project.space
import {
  AlertBadge,
  Button,
  ColumnLayout,
  Content,
  CopyButton,
  Header,
  Heading,
  IconExternalLink,
  Label,
  LabeledValue,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>
      Mein Projekt
      <AlertBadge status="danger">Deaktiviert</AlertBadge>
    </Heading>

    <Button variant="soft" color="secondary">
      Datenbank migrieren
    </Button>
    <Button color="accent">Aktivieren</Button>
  </Header>

  <ColumnLayout>
    <LabeledValue>
      <Label>Projektname</Label>
      <Content>Dolce Vita</Content>
    </LabeledValue>
    <LabeledValue>
      <Label>Short-ID</Label>
      <Content>p-lol3qe</Content>
      <CopyButton text="p-lol3qe" />
    </LabeledValue>
    <LabeledValue>
      <Label>Projektdomain</Label>
      <Link>
        <Text>p-lol3qe.project.space</Text>
        <IconExternalLink />
      </Link>
      <CopyButton text="p-lol3qe.project.space" />
    </LabeledValue>
  </ColumnLayout>
</Section>

Overview