# Tabs

Tabs strukturieren verwandte Inhalte und ermöglichen einen schnellen Zugriff auf unterschiedliche Ansichten.

## Overview

# Playground

Verwende `<Tabs />`, um Tabs darzustellen. Jeder einzelne Tab wird mit `<Tab />`
definiert und erhält seine Bezeichnung über `<TabTitle />`.

```tsx
import {
  Header,
  Heading,
  Label,
  LabeledValue,
  LayoutCard,
  Section,
  Switch,
  Tab,
  Tabs,
  TabTitle,
  Text,
  TextField,
} from "@mittwald/flow-react-components";

<LayoutCard>
  <Tabs>
    <Tab>
      <TabTitle>Allgemein</TabTitle>
      <Section>
        <Heading>Allgemein</Heading>
        <TextField defaultValue="example@mittwald.de">
          <Label>E-Mail-Adresse</Label>
        </TextField>
      </Section>
    </Tab>
    <Tab id="storage">
      <TabTitle>Speicherplatz</TabTitle>
      <Section>
        <Heading>Speicherplatz</Heading>
        <LabeledValue>
          <Label>Verfügbarer Speicherplatz</Label>
          <Text>2.4 GB</Text>
        </LabeledValue>
      </Section>
    </Tab>
    <Tab>
      <TabTitle>Spamschutz</TabTitle>
      <Section>
        <Header>
          <Heading>Spamschutz</Heading>
          <Switch>Spamfilter</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>
  </Tabs>
</LayoutCard>
```

---

# Kollabierte Ansicht

Wenn die verfügbare Breite nicht ausreicht, wechseln die Tabs automatisch in
eine kollabierte Ansicht.

```tsx
import {
  LayoutCard,
  Tab,
  Tabs,
  TabTitle,
} from "@mittwald/flow-react-components";

<LayoutCard style={{ width: "250px" }}>
  <Tabs>
    <Tab>
      <TabTitle>Allgemein</TabTitle>
      Allgemeiner Inhalt
    </Tab>
    <Tab id="storage">
      <TabTitle>Speicherplatz</TabTitle>
      Speicherplatz Inhalt
    </Tab>
    <Tab>
      <TabTitle>Spamschutz</TabTitle>
      Spamschutz Inhalt
    </Tab>
  </Tabs>
</LayoutCard>
```

---

# Mit Status-Icon

Wenn der Inhalt eines Tabs eine wichtige Information oder Warnung enthält (z. B.
in Form eines [Alerts](/04-components/status/alert/overview)), muss der
entsprechende Tab ein Status-Icon erhalten.

```tsx
import {
  Alert,
  AlertIcon,
  Heading,
  LayoutCard,
  Tab,
  Tabs,
  TabTitle,
} from "@mittwald/flow-react-components";

<LayoutCard>
  <Tabs>
    <Tab>
      <TabTitle>Allgemein</TabTitle>
      Allgemeiner Inhalt
    </Tab>
    <Tab id="storage">
      <TabTitle>
        Speicherplatz
        <AlertIcon status="danger" />
      </TabTitle>
      <Alert status="danger">
        <Heading>Dein Speicherplatz ist voll</Heading>
      </Alert>
    </Tab>
    <Tab>
      <TabTitle>Spamschutz</TabTitle>
      Spamschutz Inhalt
    </Tab>
  </Tabs>
</LayoutCard>
```

---

# Mit vorausgewähltem Tab

Standardmäßig sollte der erste Tab vorausgewählt sein. Falls ein anderer Tab
initial aktiv sein soll, kann dies über `defaultSelectedKey` festgelegt werden.

```tsx
import {
  LayoutCard,
  Tab,
  Tabs,
  TabTitle,
} from "@mittwald/flow-react-components";

<LayoutCard>
  <Tabs defaultSelectedKey="storage">
    <Tab>
      <TabTitle>Allgemein</TabTitle>
      Allgemeiner Inhalt
    </Tab>
    <Tab id="storage">
      <TabTitle>Speicherplatz</TabTitle>
      Speicherplatz Inhalt
    </Tab>
    <Tab>
      <TabTitle>Spamschutz</TabTitle>
      Spamschutz Inhalt
    </Tab>
  </Tabs>
</LayoutCard>
```