Tabs

Wenn Ihre Seite parallele Alternativen bietet (Paketmanager, Programmiersprachen oder betriebssystemspezifische Anweisungen), können Leser mit Tabs einmalig auswählen und im Kontext bleiben. Gleiche Tab-Titel werden automatisch auf der gesamten Seite synchronisiert. Wenn Sie in einer Gruppe „yarn“ auswählen, werden alle anderen npm/yarn/pnpm-Gruppen entsprechend angepasst.

Verwenden Sie Tabs, wenn:

• Mehrere Implementierungen desselben Konzepts existieren (npm/yarn/pnpm, JavaScript/Python)
• Parallele Optionen sich gegenseitig ausschließen (Benutzer wählen eine, nicht beide)
• Konsistenz wichtig ist – die Auswahl des Lesers sollte auf der gesamten Seite bestehen 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 (z. B. der bevorzugte Paketmanager) auf der gesamten Seite bestehen bleiben soll. Verwenden Sie CodeGroup für Vergleiche, die nur Code enthalten. Verwenden Sie Accordion für Inhalte, die alle relevant sein können.

Tabs mit Symbolen

Fügen Sie Tab-Titeln mithilfe von Font Awesome-Symbolen Symbole 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 Eigenschaft borderBottom, um unter dem Tab-Inhalt 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 übereinstimmenden Titeln werden automatisch auf der gesamten Seite synchronisiert. Klicken Sie in einer Gruppe auf „yarn“, und alle npm/yarn/pnpm-Tabs auf der Seite wechseln gemeinsam:

Installieren:

npm install my-package

Ausführen:

npm run dev

Die Synchronisierung erfolgt, wenn Tab-Titel übereinstimmen (ohne Beachtung der Groß- und Kleinschreibung).

Eigenschaften

Tabs

Tab

Wie geht es weiter?