Tabs

Tabs strukturieren verwandte Inhalte und ermöglichen einen schnellen Zugriff auf unterschiedliche Ansichten.GitHubMarkdown
App Content
Container Content

Playground

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

App Content
Container Content
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.

SSH-Benutzer

App Content
Container Content

Mit Status-Icon

Wenn der Inhalt eines Tabs eine wichtige Information oder Warnung enthält (z. B. in Form eines Alerts), muss der entsprechende Tab ein Status-Icon erhalten.

App Content
Container Content

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.

App Content
Container Content

Auf dieser Seite