# 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 />`.

  Tabs vs. TabNavigation

    Verwende Tabs um Inhalte innerhalb derselben Seite umzuschalten, ohne zu
    navigieren. Um zu navigieren verwende die
    [TabNavigation](/04-components/navigation/tab-navigation/overview).

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

<Tabs>
  <Tab>
    <TabTitle>Mit App verbinden</TabTitle>
    App Content
  </Tab>
  <Tab>
    <TabTitle>Mit Container verbinden</TabTitle>
    Container Content
  </Tab>
</Tabs>
```

---

# Eingeklappte Ansicht

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

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

<LayoutCard style={{ maxWidth: "320px" }}>
  <Section>
    <Heading>SSH-Benutzer</Heading>
    <Tabs>
      <Tab>
        <TabTitle>Mit App verbinden</TabTitle>
        App Content
      </Tab>
      <Tab>
        <TabTitle>Mit Container verbinden</TabTitle>
        Container Content
      </Tab>
    </Tabs>
  </Section>
</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 {
  AlertIcon,
  Tab,
  Tabs,
  TabTitle,
} from "@mittwald/flow-react-components";

<Tabs>
  <Tab>
    <TabTitle>Mit App verbinden</TabTitle>
    App Content
  </Tab>
  <Tab>
    <TabTitle>
      Mit Container verbinden
      <AlertIcon status="warning" />
    </TabTitle>
    Container Content
  </Tab>
</Tabs>
```

---

# 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 {
  Tab,
  Tabs,
  TabTitle,
} from "@mittwald/flow-react-components";

<Tabs defaultSelectedKey="container">
  <Tab>
    <TabTitle>Mit App verbinden</TabTitle>
    App Content
  </Tab>
  <Tab id="container">
    <TabTitle>Mit Container verbinden</TabTitle>
    Container Content
  </Tab>
</Tabs>
```