Section

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

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. Eine Section erzeugt automatisch feste Abstände zwischen den Elementen, die in ihr platziert werden.

import Heading from "@mittwald/flow-react-components/Heading";
import Text from "@mittwald/flow-react-components/Text";
import Section from "@mittwald/flow-react-components/Section";

<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 du mehrere Sections untereinander platzierst, werden sie automatisch durch einen Separator getrennt.

import Heading from "@mittwald/flow-react-components/Heading";
import Text from "@mittwald/flow-react-components/Text";
import Section from "@mittwald/flow-react-components/Section";
import Header from "@mittwald/flow-react-components/Header";
import { Button } from "@mittwald/flow-react-components/Button";

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

Kombiniere mit...

Actions

Die Section unterstützt in der rechten oberen Ecke einen Bereich, der für Actions reserviert ist. Dort kann ein Link, Switch, Button oder eine Kombination dieser Components verwendet werden.

import { Section } from "@mittwald/flow-react-components/Section";
import { Heading } from "@mittwald/flow-react-components/Heading";
import { Text } from "@mittwald/flow-react-components/Text";
import Header from "@mittwald/flow-react-components/Header";
import { Link } from "@mittwald/flow-react-components/Link";

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

import Header from "@mittwald/flow-react-components/Header";
import Text from "@mittwald/flow-react-components/Text";
import Section from "@mittwald/flow-react-components/Section";
import Switch from "@mittwald/flow-react-components/Switch";
import Heading from "@mittwald/flow-react-components/Heading";

<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 dargestellt werden. Gibt es mehr als zwei Buttons, sollte nur die Hauptaktion sichtbar sein. Alle anderen Buttons müssen in ein ContextMenu.

import Header from "@mittwald/flow-react-components/Header";
import Section from "@mittwald/flow-react-components/Section";
import Heading from "@mittwald/flow-react-components/Heading";
import Button from "@mittwald/flow-react-components/Button";
import Content from "@mittwald/flow-react-components/Content";
import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
import Label from "@mittwald/flow-react-components/Label";
import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";
import {
  IconContextMenu,
  IconExternalLink,
} from "@mittwald/flow-react-components/Icons";
import ContextMenu, {
  ContextMenuTrigger,
} from "@mittwald/flow-react-components/ContextMenu";
import MenuItem from "@mittwald/flow-react-components/MenuItem";
import { Link } from "@mittwald/flow-react-components/Link";
import { CopyButton } from "@mittwald/flow-react-components/CopyButton";
import Text from "@mittwald/flow-react-components/Text";

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

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

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

  <Content>
    <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>
  </Content>
</Section>

AlertBadge

Die Heading kann mit einem AlertBadge erweitert werden. So wird der AlertBadge erweitert werden. So wird der User schnell über den Status des Inhaltes einer Section informiert.

import Header from "@mittwald/flow-react-components/Header";
import { Text } from "@mittwald/flow-react-components/Text";
import Section from "@mittwald/flow-react-components/Section";
import AlertBadge from "@mittwald/flow-react-components/AlertBadge";
import Heading from "@mittwald/flow-react-components/Heading";
import Button from "@mittwald/flow-react-components/Button";
import Content from "@mittwald/flow-react-components/Content";
import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
import Label from "@mittwald/flow-react-components/Label";
import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";
import { Link } from "@mittwald/flow-react-components/Link";
import { CopyButton } from "@mittwald/flow-react-components/CopyButton";
import { IconExternalLink } from "@mittwald/flow-react-components/Icons";

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

  <Content>
    <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>
  </Content>
</Section>

Grundlagen

Best practices

Gib der Section eine kurze, aussagekräftige Heading.
Integriere bei Bedarf einen Switch, Link oder Buttons.
Verwendest du mehrere Sections, sollte die wichtigste ganz oben stehen.

Verwendung

Verwende eine Section, um...

deinen Content in kleinere Teilbereiche zu trennen und so die Übersichtlichkeit zu erhöhen.
einzelne Teilbereiche automatisch durch einen Separator zu trennen, indem du mehrere Sections verwendest.
Elemente vertikal zu positionieren und so die richtigen Abstände zu gewährleisten. Nutze für horizontale Positionierungen ein ColumnLayout.

Anwendung

Abstände

Die Section liefert automatisch Abstände zwischen Elementen, die in ihr platziert werden. Aufeinanderfolgende Sections werden zusätzlich durch einen Separator getrennt.

Im Standard entsteht so eine klare visuelle Struktur und Hierarchie für den Content, der in einer Section platziert wird. Falls du Abstände anpassen musst, achte darauf, dass sie unserem generellen Spacing entsprechen.

Position

Sections werden häufig im Content-Bereich verwendet und füllen dort die gesamte Breite aus. Wenn mehrere Sections untereinander verwendet werden, achte auf folgende Punkte:

Die Section mit dem wichtigsten Inhalt sollte ganz oben stehen, insbesondere Sections mit AlertBadge oder Actions.
Vermeide zu viele Sections, um den User nicht zu überladen. Überlege, ob der Content in solchen Fällen auf mehrere Seiten oder Tabs verteilt werden sollte.

Hierarchie

Eine Section beginnt immer mit einer Heading. Darauf folgt der eigentliche Content – also Informationen in Form vom LabeledValues oder einfachem Text. Im unteren Bereich der Section bilden häufig Links und Buttons den Abschluss.

Do

Erzeuge eine klare und sinnvolle Struktur innerhalb der Section.

Inhalt

Actions und AlertBadge

Durch den Action-Bereich sowie den AlertBadge lassen sich Informationen und Interaktionen kompakt darstellen. Achte bei der Verwendung dieser Elemente darauf, dass ...

AlertBadge und Actions sich immer unmittelbar auf die Section beziehen, der sie zugeordnet sind.
Die Hauptaktion der Section sich deutlich von anderen Aktionen abhebt. Dies gilt insbesondere, wenn 2 oder mehr Buttons verwendet werden.

Do

Der AlertBadge bezieht sich auf den Status der Section, der er zugeordnet ist. Die Hauptaktion der Section ist deutlich hervorgehoben und dauerhaft sichtbar, obwohl es mehrere Actions gibt.

Don't

Der AlertBadge sollte sich nicht auf Dinge beziehen, die außerhalb der Section liegen. Außerdem sollte die Hauptaktion immer sichtbar sein.

Verhalten

Responsive Layout

Die Section passt sich der Breite des umgebenden Containers an.
Reicht die Breite der Section nicht aus, um alle Inhalte des Header-Bereichs darzustellen, brechen der Switch oder die Buttons in die nächste Zeile um. Dort ordnen sie sich weiterhin an der rechten Seite an.
Der AlertBadge bleibt immer auf einer Höhe mit dem Titel. Ist der Titel zu lang, wird er zweizeilig.

Mobile

Wenn die Section nicht alle Inhalte horizontal darstellen kann, springen die Actions in die nächste Zeile. Dort ordnen sie sich weiterhin rechts an.

Textumbruch Heading

AlertBadge und Heading bleiben immer auf einer Höhe. Ist der Text zu lang, bricht er in die nächste Zeile um.

Feedback geben