# Detailseite

Detailseiten sind die zentrale Oberfläche innerhalb der Anwendung. Sie bündeln
alle relevanten Informationen zu einem einzelnen Objekt und stellen diese im
Content-Bereich übersichtlich dar. Von hier aus können Bearbeitungs- und
Anlageprozesse gestartet werden. Sie gliedert sich in zwei Hauptbereiche: den
**ContentHeader**, der dem User Orientierung gibt, und den **Content**, in dem
die eigentlichen Informationen und Aktionen dargestellt werden.

---

# Code-Beispiel

Das folgende Code-Beispiel zeigt den Aufbau einer typischen Detailseite in
mStudio. Es veranschaulicht, wie Inhalte strukturiert und dargestellt werden.

```tsx
import {
  Breadcrumb,
  Button,
  ColumnLayout,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Flex,
  Header,
  Heading,
  IconChevronDown,
  IconDelete,
  IconEdit,
  IconExternalLink,
  IconPassword,
  Label,
  LabeledValue,
  LayoutCard,
  Link,
  MenuItem,
  Modal,
  ModalTrigger,
  ProgressBar,
  Section,
  Segment,
  SegmentedControl,
  Switch,
  Tab,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
  Tabs,
  TabTitle,
  Text,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const [connectionType, setConnectionType] =
    useState("IMAP");

  return (
    <Flex direction="column" gap="m">
      <Flex direction="column">
        <Breadcrumb color="dark">
          <Link>Projekt</Link>
          <Link>E-Mails</Link>
          <Link>E-Mail-Details</Link>
        </Breadcrumb>
        <Flex justify="space-between" align="end">
          <Heading color="dark" level={1}>
            max@mustermann.de
          </Heading>
          <ContextMenuTrigger>
            <Button variant="outline" color="dark">
              <Text>Aktionen</Text>
              <IconChevronDown />
            </Button>
            <ContextMenu placement="bottom end">
              <MenuItem>
                <IconEdit />
                <Text>E-Mail-Adresse bearbeiten</Text>
              </MenuItem>
              <MenuItem>
                <IconPassword />
                <Text>Passwort ändern</Text>
              </MenuItem>
              <MenuItem>
                <IconExternalLink />
                <Text>mittwald Webmailer</Text>
              </MenuItem>
              <MenuItem>
                <IconDelete />
                <Text>Löschen</Text>
              </MenuItem>
            </ContextMenu>
          </ContextMenuTrigger>
        </Flex>
      </Flex>
      <LayoutCard>
        <Tabs>
          <Tab>
            <TabTitle>Allgemein</TabTitle>
            <Section>
              <Header>
                <Heading>E-Mail-Adresse</Heading>
                <ModalTrigger>
                  <Button variant="soft" color="secondary">
                    Passwort ändern
                  </Button>
                  <Modal>
                    <Heading>Passwort ändern</Heading>
                    <Content>
                      <Text>...</Text>
                    </Content>
                  </Modal>
                </ModalTrigger>
                <ModalTrigger>
                  <Button>E-Mail-Adresse bearbeiten</Button>
                  <Modal>
                    <Heading>
                      E-Mail-Adresse bearbeiten
                    </Heading>
                    <Content>
                      <Text>...</Text>
                    </Content>
                  </Modal>
                </ModalTrigger>
              </Header>
              <ColumnLayout>
                <LabeledValue>
                  <Label>E-Mail-Adresse</Label>
                  <Text>max@mustermann.de</Text>
                </LabeledValue>
                <LabeledValue>
                  <Label>Webmailer</Label>
                  <Link target="_blank">
                    mittwald Webmailer
                  </Link>
                </LabeledValue>
              </ColumnLayout>
            </Section>
            <Section>
              <Header>
                <Heading>Speicherplatz</Heading>
                <ModalTrigger>
                  <Button variant="soft" color="secondary">
                    Bearbeiten
                  </Button>
                  <Modal>
                    <Heading>
                      Speicherplatz bearbeiten
                    </Heading>
                    <Content>
                      <Text>...</Text>
                    </Content>
                  </Modal>
                </ModalTrigger>
              </Header>
              <Text>
                Die E-Mail-Adresse verfügt über einen
                Speicherplatz zum Empfangen und Speichern
                von E-Mails. Wir empfehlen dir, mindestens 2
                GB zu reservieren.
              </Text>
              <ProgressBar
                formatOptions={{
                  style: "unit",
                  unit: "gigabyte",
                }}
                size="l"
                showMaxValue
                maxValue={2}
                value={1}
                status="success"
              >
                <Label>Speicherplatz</Label>
              </ProgressBar>
            </Section>
            <Section>
              <Heading>Verbindungsinformationen</Heading>
              <SegmentedControl
                defaultValue={connectionType}
                onChange={setConnectionType}
                aria-label="Verbindungsart"
              >
                <Segment value="IMAP">IMAP</Segment>
                <Segment value="POP3">POP3</Segment>
                <Segment value="SMTP">SMTP</Segment>
              </SegmentedControl>
              <Table aria-label="Verbindungsinformationen">
                <TableHeader>
                  <TableColumn></TableColumn>
                  <TableColumn></TableColumn>
                </TableHeader>
                <TableBody>
                  <TableRow>
                    <TableCell rowHeader>
                      Benutzername
                    </TableCell>
                    <TableCell>max@mustermann.de</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell rowHeader>
                      {connectionType} Port
                    </TableCell>
                    <TableCell>...</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell rowHeader>
                      {connectionType} Postausgang
                    </TableCell>
                    <TableCell>...</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </Section>
            <Section>
              <Header>
                <Heading>Spamschutz</Heading>
                <Switch defaultSelected>Aktivieren</Switch>
              </Header>
              <Text>
                Der Spamfilter schützt dich vor ungewollten
                E-Mails. Niemand will Müll in seinem
                Postfach, daher empfehlen wir den Spamschutz
                immer aktiviert zu lassen.
              </Text>
            </Section>
          </Tab>
          <Tab>
            <TabTitle>Weiterleitungen</TabTitle>
            <Section>
              <Text>...</Text>
            </Section>
          </Tab>
          <Tab>
            <TabTitle>Autoresponder</TabTitle>
            <Section>
              <Text>...</Text>
            </Section>
          </Tab>
        </Tabs>
      </LayoutCard>
    </Flex>
  );
}
```

---

# ContentHeader

Der ContentHeader enthält Orientierungselemente wie PageTitle und Breadcrumb
sowie Schnellzugriffe im ActionMenu.

## PageTitle

Der PageTitle wird als [Heading](/04-components/content/heading) mit H1
dargestellt. Er gibt den Usern eine klare Orientierung darüber, in welchem
Bereich sie sich befinden. Der Titel steht in direktem Bezug zum Inhalt der
Detailseite.

## Breadcrumb

Die [Breadcrumb](/04-components/navigation/breadcrumb) ergänzt die Orientierung.
Sie ermöglicht die Navigation innerhalb des Seitenbaums und bietet eine schnelle
Rückkehr zu übergeordneten Ebenen. Die Bezeichnungen der Einträge sind möglichst
generisch gehalten, um Platz zu sparen und unterschiedlich lange Namen
konsistent abzubilden.

## ActionMenu

Das ActionMenu besteht aus einem
[Button](/04-components/actions/button/overview) als Trigger und einem
[ContextMenu](/04-components/actions/context-menu/overview). Es bietet zentrale
Aktionen, sogenannte QuickActions, an. QuickActions spiegeln wichtige Funktionen
wider, die zwar innerhalb des Contents vorhanden sind und hier zusätzlich als
Schnellzugriff zur Verfügung stehen. Außerdem werden die Funktionen „Umbenennen“
oder „Löschen“ hier platziert.

---

# Content

Im Content-Bereich werden die für den User relevanten Informationen dargestellt
und Bearbeitungs- sowie Anlageprozesse ermöglicht. Damit Seiten einheitlich
wirken, sollten die Inhalte nach einem wiederkehrenden Muster aufgebaut werden.
Grundlage ist die LayoutCard als Container für Sections, die bei Bedarf mit Tabs
ergänzt werden können.

## LayoutCard

Die [LayoutCard](/04-components/structure/layout-card/overview) ist die
Grundlage jeder Detailseite. Sie bildet den äußeren Container für den Inhalt und
stellt Hintergrund und Padding bereit.

## Tabs

[Tabs](/04-components/navigation/tabs) schaffen Übersicht bei komplexen
Inhalten. Sie teilen den Content in kleinere thematische Einheiten auf. Wenn
sich mehrere Sections sinnvoll gruppieren lassen, können sie in einem Tab
ausgelagert werden. User können so zwischen verschiedenen Ansichten wechseln,
ohne den Kontext zu verlieren.

## Sections

[Sections](/04-components/structure/section) strukturieren die Inhalte in
Themenblöcke. Jede Section beginnt dabei mit einer H2-Überschrift. Weitere
Unterteilungen erfolgen über verschachtelte Sections mit den Überschriften H3
bis H5 (siehe [Heading](/04-components/content/heading)). Neben der Heading
können auch Actions platziert werden. Die sogenannten SectionAction im
Section-Header bietet Platz für Elemente wie
[Buttons](/04-components/actions/button/overview),
[Links](/04-components/navigation/link) oder
[Switches](/04-components/form-controls/switch). Diese stehen in direktem
Zusammenhang mit der jeweiligen Section. Über Buttons können beispielsweise
Bearbeitungs- und Anlegeprozesse gestartet werden.

## ColumnLayout

Das [ColumnLayout](/04-components/structure/column-layout) organisiert Inhalte
in Spalten. Anzahl und Breite der Spalten sind flexibel und passen sich an
unterschiedliche Breakpoints an.