Zum Inhalt springen
Starlight

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
Sirius, Wega, Betelgeuse

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.

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


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

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:

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

Ein paar Sterne:

Bellatrix, Rigel, Betelgeuse

Ein paar Exoplaneten:

HD 34445 b, Gliese 179 b, Wasp-82 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.

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

Sirius, Wega, Betelgeuse

<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 Icons gesetzt ist, um ein Icon neben dem Label anzuzeigen.