mittwald Flow Logo

Components

Tabs

Tabs strukturieren verwandte Inhalte und ermöglichen einen schnellen Zugriff auf unterschiedliche Ansichten.GitHub
Allgemeiner Inhalt
Speicherplatz Inhalt
Spamschutz Inhalt

Playground

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

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

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

Kollabierte Ansicht

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

Allgemeiner Inhalt
Speicherplatz Inhalt
Spamschutz Inhalt
import {
  Tab,
  Tabs,
  TabTitle,
} from "@mittwald/flow-react-components";

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

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.

Allgemeiner Inhalt
Spamschutz Inhalt
import {
  Alert,
  AlertIcon,
  Heading,
  Tab,
  Tabs,
  TabTitle,
} from "@mittwald/flow-react-components";

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

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.

Allgemeiner Inhalt
Speicherplatz Inhalt
Spamschutz Inhalt
import {
  Tab,
  Tabs,
  TabTitle,
} from "@mittwald/flow-react-components";

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

Overview