Registerkarten

Um eine Oberfläche mit Registerkarten zu erstellen, verwende die Komponenten <Tabs> und <TabItem>. Registerkarten sind nützlich, um gleichwertige Informationen zu gruppieren, wenn ein Nutzer nur eine von mehreren Optionen sehen muss.

Vorschau

Sterne

Sirius, Wega, Betelgeuse

Monde

Io, Europa, Ganymed

Import

import { Tabs, TabItem } from '@astrojs/starlight/components';

Verwendung

Zeige eine Oberfläche mit Registerkarten an, indem du die Komponenten <Tabs> und <TabItem> benutzt. Jedes <TabItem> muss ein label haben, um es den Benutzern anzuzeigen.

MDX

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Sterne">Sirius, Wega, Betelgeuse</TabItem>
  <TabItem label="Monde">Io, Europa, Ganymed</TabItem>
</Tabs>

Markdoc

{% tabs %}
{% tabitem label="Sterne" %}
Sirius, Wega, Betelgeuse
{% /tabitem %}

{% tabitem label="Monde" %}
Io, Europa, Ganymed
{% /tabitem %}
{% /tabs %}

Vorschau

Sterne

Sirius, Wega, Betelgeuse

Monde

Io, Europa, Ganymed

Registerkarten synchronisieren

Halte mehrere Registerkarten­gruppen synchron, indem du das Attribut syncKey hinzufügst.

Alle <Tabs> auf einer Seite mit demselben Wert für syncKey zeigen dasselbe aktive Label an. Auf diese Weise kann dein Leser eine Auswahl treffen (z. B. sein Betriebssystem oder den Paketmanager), die dann beim Navigieren durch die Seiten beibehalten wird.

Um zusammenhängende Tabs zu synchronisieren, füge eine identische syncKey-Eigenschaft zu jeder <Tabs>-Komponente hinzu und stelle sicher, dass sie alle die gleichen <TabItem>-Beschriftungen verwenden:

MDX

import { Tabs, TabItem } from '@astrojs/starlight/components';

_Ein paar Sterne:_

<Tabs syncKey="constellations">
  <TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
  <TabItem label="Zwillinge">Pollux, Castor A, Castor B</TabItem>
</Tabs>

_Ein paar Exoplaneten:_

<Tabs syncKey="constellations">
  <TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
  <TabItem label="Zwillinge">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>

Markdoc

_Ein paar Sterne:_

{% tabs syncKey="constellations" %}
{% tabitem label="Orion" %}
Bellatrix, Rigel, Betelgeuse
{% /tabitem %}

{% tabitem label="Zwillinge" %}
Pollux, Castor A, Castor B
{% /tabitem %}
{% /tabs %}

_Ein paar Exoplaneten:_

{% tabs syncKey="constellations" %}
{% tabitem label="Orion" %}
HD 34445 b, Gliese 179 b, Wasp-82 b
{% /tabitem %}

{% tabitem label="Zwillinge" %}
Pollux b, HAT-P-24b, HD 50554 b
{% /tabitem %}
{% /tabs %}

Vorschau

Ein paar Sterne:

Orion

Bellatrix, Rigel, Betelgeuse

Zwillinge

Pollux, Castor A, Castor B

Ein paar Exoplaneten:

Orion

HD 34445 b, Gliese 179 b, Wasp-82 b

Zwillinge

Pollux b, HAT-P-24b, HD 50554 b

Hinzufügen von Symbolen zu Registerkarten

Füge ein Symbol in ein Tab-Element ein, indem du das Attribut icon auf den Namen eines der in Starlight eingebauten Symbole setzt, um ein Symbol neben dem Label anzuzeigen.

MDX

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Sterne" icon="star">
    Sirius, Wega, Betelgeuse
  </TabItem>
  <TabItem label="Monde" icon="moon">
    Io, Europa, Ganymed
  </TabItem>
</Tabs>

Markdoc

{% tabs %}
{% tabitem label="Sterne" icon="star" %}
Sirius, Wega, Betelgeuse
{% /tabitem %}

{% tabitem label="Monde" icon="moon" %}
Io, Europa, Ganymed
{% /tabitem %}
{% /tabs %}

Vorschau

Sterne

Sirius, Wega, Betelgeuse

Monde

Io, Europa, Ganymed

<Tabs>-Eigenschaften

Implementation: Tabs.astro

Die Komponente <Tabs> fasst mehrere <TabItem>-Komponenten zusammen und akzeptiert die folgenden Eigenschaften:

syncKey

Typ: string

Ein Schlüssel, der verwendet wird, um mehrere Registerkarten­gruppen über mehrere Seiten hinweg zu synchronisieren.

<TabItem>-Eigenschaften

Implementation: TabItem.astro

Ein Satz von Tabs besteht aus Tab-Elementen, die jeweils die folgenden Eigenschaften haben:

label

Erforderlich
Typ: string

Eine Registerkarte muss ein Attribut label enthalten, das auf den Text gesetzt ist, der in der Registerkarte angezeigt werden soll.

icon

Typ: string

Jedes Tab-Element kann ein icon-Attribut enthalten, das auf den Namen eines von Starlights eingebauten Symbolen gesetzt ist, um ein Symbol neben dem Label anzuzeigen.