Schau mal hier
Interessanter Inhalt, den du hervorheben möchtest.
Mit Komponenten kannst du auf einfache Weise einen Teil der Benutzeroberfläche oder ein Styling konsistent wiederverwenden, zum Beispiel eine Linkkarte oder eine YouTube-Einbettung. Starlight unterstützt die Verwendung von Komponenten in MDX-Dateien und stellt dir einige gängige Komponenten zur Verfügung, die du verwenden kannst.
Erfahre mehr über die Erstellung von Komponenten in den Astro Docs.
Du kannst eine Komponente verwenden, indem du sie in deine MDX-Datei importierst und sie dann als JSX-Tag renders.
Diese sehen wie HTML-Tags aus, beginnen aber mit einem Großbuchstaben, der dem Namen in der import
-Anweisung entspricht:
Da Starlight auf Astro basiert, kannst du Komponenten, die mit einem beliebigen unterstützten UI-Framework (React, Preact, Svelte, Vue, Solid, Lit und Alpine) erstellt wurden, in deine MDX-Dateien aufnehmen. Erfahre mehr über Verwendung von Komponenten in MDX in den Astro-Dokumenten.
Starlight wendet Standardstile auf deinen Markdown-Inhalten an, zum Beispiel das Hinzufügen von Abständen zwischen Elementen.
Wenn diese Stile mit dem Erscheinungsbild deiner Komponente in Konflikt stehen, setze die Klasse not-content
auf deine Komponente, um sie zu deaktivieren.
Starlight bietet einige standardmäßig eingebaute Komponenten für gängige Dokumentationszwecke.
Diese Komponenten sind aus dem Paket @astrojs/starlight/components
verfügbar.
Mit den Komponenten <Tabs>
und <TabItem>
kannst du eine Oberfläche mit Registerkarten anzeigen.
Jedes <TabItem>
muss ein label
haben, welches dem Benutzer angezeigt wird.
Der obige Code erzeugt die folgenden Registerkarten auf der Seite:
Mit der Komponente <Card>
kannst du Inhalte in einer Box darstellen, die den Stilen von Starlight entspricht.
Packe mehrere Karten in die <CardGrid>
Komponente ein, um Karten nebeneinander darzustellen, wenn genügend Platz vorhanden ist.
Eine <Card>
benötigt einen title
und kann optional ein icon
Attribut enthalten, welches auf den Namen eines von Starlights eingebauten Icons gesetzt ist.
Der obige Code erzeugt folgendes auf der Seite:
Schau mal hier
Interessanter Inhalt, den du hervorheben möchtest.
Sterne
Sirius, Wega, Betelgeuse
Monde
Io, Europa, Ganymed
Verwende die <LinkCard>
Komponente, um auffallend auf verschiedene Seiten zu verlinken.
Eine <LinkCard>
benötigt ein title
und ein href
Attribut. Du kannst optional eine kurze description
oder andere Link-Attribute wie target
einfügen.
Gruppiere mehrere <LinkCard>
-Komponenten in <CardGrid>
, um Karten nebeneinander anzuzeigen, wenn genügend Platz vorhanden ist.
Der obige Code erzeugt folgendes auf der Seite:
Starlight stellt eine Reihe von allgemeinen Icons zur Verfügung, die du mit der Komponente <Icon>
in deinem Inhalt anzeigen kannst.
Jedes <Icon>
benötigt einen name
und kann optional ein label
, size
und color
Attribut enthalten.
Der obige Code erzeugt folgendes auf der Seite:
Nachfolgend findest du eine Liste aller verfügbaren Icons mit den dazugehörigen Namen. Klicke auf ein Symbol, um den Komponentencode dafür zu kopieren.