Tabs

Verwenden Sie Tabs für parallele Alternativen: Paketmanager, Programmiersprachen oder betriebssystemspezifische Anleitungen. Leser wählen einmal aus und bleiben im Kontext. Gleichnamige Tab-Titel werden auf der Seite synchronisiert. Wenn Sie in einer Gruppe „yarn“ auswählen, wechseln alle anderen npm/yarn/pnpm-Gruppen entsprechend.

Verwenden Sie Tabs, wenn:

• mehrere Umsetzungen desselben Konzepts existieren (npm/yarn/pnpm, JavaScript/Python)
• parallele Optionen sich gegenseitig ausschließen (der Leser wählt eine aus)
• Konsistenz wichtig ist: Die Auswahl des Lesers sollte auf der gesamten Seite erhalten bleiben

Verwendung

<Tabs>
  <Tab title="npm">npm install jamdesk</Tab>
  <Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>

Grundlegende Tabs

<Tabs>
  <Tab title="First Tab">

    Content for the first tab.

</Tab>
  <Tab title="Second Tab">

    Content for the second tab.

</Tab>
  <Tab title="Third Tab">

    Content for the third tab.

</Tab>
</Tabs>

Tabs vs. CodeGroup vs. Accordion

Faustregel: Verwenden Sie Tabs, wenn die Auswahl des Lesers (etwa der bevorzugte Paketmanager) auf der gesamten Seite erhalten bleiben soll. Verwenden Sie CodeGroup für reine Code-Vergleiche. Verwenden Sie Accordion für Inhalte, die alle relevant sein können.

Tabs mit Symbolen

Fügen Sie Font-Awesome-Icons zu Tab-Titeln hinzu:

function App() {
  return <h1>Hello React</h1>;
}

<Tabs>
  <Tab title="React" icon="react" iconType="brands">

    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```

</Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">

    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```

</Tab>
</Tabs>

Unterer Rand

Verwenden Sie die Prop borderBottom, um unterhalb des Tab-Inhalts eine visuelle Trennlinie hinzuzufügen:

<Tabs borderBottom>
  <Tab title="Overview">

    This tab group has a bottom border for visual separation.

</Tab>
  <Tab title="Details">

    Useful when tabs contain varying content lengths.

</Tab>
</Tabs>

Synchronisierte Tabs

Tabs mit gleichnamigen Titeln werden auf der gesamten Seite synchronisiert. Klicken Sie in einer Gruppe auf „yarn“, und alle npm/yarn/pnpm-Gruppen auf der Seite wechseln mit:

Installieren:

npm install my-package

Ausführen:

npm run dev

Die Synchronisierung erfolgt, wenn Tab-Titel übereinstimmen (Groß-/Kleinschreibung wird nicht beachtet).

Eigenschaften

Tabs

Tab

Wie geht es weiter?