Components

Tabs

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

Tab not found

The tab you tried to access no longer exists or you do not have permission to view it.

Playground

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

Tab not found

The tab you tried to access no longer exists or you do not have permission to view it.
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

Tab not found

The tab you tried to access no longer exists or you do not have permission to view it.

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

Tab not found

The tab you tried to access no longer exists or you do not have permission to view it.

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

Tab not found

The tab you tried to access no longer exists or you do not have permission to view it.

Tab not found

The tab you tried to access no longer exists or you do not have permission to view it.

Overview