Steps
Die Steps-Komponente hilft dabei, klare, visuell verbundene Listen mit Anleitungen oder Schritten zu erstellen. Sie nummeriert jeden Schritt automatisch und verbindet sie visuell miteinander, sodass Leser:innen sequenziellen Inhalten leicht folgen können.
Grundlegende Verwendung
Umschließe deine geordnete Liste von Schritten mit der Steps-Komponente:
-
Die Komponente muss nicht importiert werden. Sie wird in
mdx-Dateien automatisch überastro-auto-importeingebunden. Ein entspannter Tag für dich! -
Du verwendest sie, indem du eine geordnete Liste von Schritten mit der
<Steps>-Komponente umschließt.<Steps>1. Die Komponente muss nicht importiert werden. Sie wird in `mdx`-Dateien automatisch über `astro-auto-import` eingebunden. Ein entspannter Tag für dich!2. Du verwendest sie, indem du eine geordnete Liste von Schritten mit der `<Steps>`-Komponente umschließt.3. Das ist ein dritter Schritt.</Steps> -
Das ist ein dritter Schritt.
Styling
Die Steps-Komponente übernimmt automatisch:
- Nummerierte Kreise für jeden Schritt
- Vertikale Verbindungslinien zwischen den Schritten
- Passende Abstände und Ausrichtung
- Responsives Layout
Du kannst das Erscheinungsbild anpassen, indem du eine className übergibst:
-
Die Komponente muss nicht importiert werden. Sie wird in
mdx-Dateien automatisch überastro-auto-importeingebunden. Ein entspannter Tag für dich! -
Du kannst der
<Steps>-Komponente sogar eigene Klassen übergeben. In diesem Beispiel fügen wir einemy-16-Klasse hinzu.
<Steps class="my-16"> 1. Die Komponente muss nicht importiert werden. Sie wird in `mdx`-Dateien automatisch über `astro-auto-import` eingebunden. Ein entspannter Tag für dich!
2. Du kannst der `<Steps>`-Komponente sogar eigene Klassen übergeben. In diesem Beispiel fügen wir eine `my-16`-Klasse hinzu.</Steps>Verwendung mit anderen Komponenten
Die Steps-Komponente arbeitet nahtlos mit anderen MDX-Komponenten zusammen. Hier ein Beispiel mit Tabs innerhalb von Schritten:
-
Richte zuerst deine Konfiguration auf Basis deines bevorzugten Themes ein:
Das helle Theme verwendet einen weißen Hintergrund mit dunklem Text für optimale Lesbarkeit in hellen Umgebungen.
Das dunkle Theme verwendet einen dunklen Hintergrund mit hellem Text, um die Augen bei schwachem Licht zu schonen.
Das System-Theme passt sich automatisch an die Darstellungseinstellungen deines Betriebssystems an.
-
Viel Spaß beim Steppen!
So sieht das Anwendungsbeispiel aus:
<Steps> 1. Richte zuerst deine Konfiguration auf Basis deines bevorzugten Themes ein: <Tabs defaultValue="light"> <TabsList> <TabsTrigger value="light">Hell</TabsTrigger> <TabsTrigger value="dark">Dunkel</TabsTrigger> <TabsTrigger value="system">System</TabsTrigger> </TabsList> <TabsContent value="light"> Das helle Theme verwendet einen weißen Hintergrund mit dunklem Text für optimale Lesbarkeit in hellen Umgebungen. </TabsContent> <TabsContent value="dark"> Das dunkle Theme verwendet einen dunklen Hintergrund mit hellem Text, um die Augen bei schwachem Licht zu schonen. </TabsContent> <TabsContent value="system"> Das System-Theme passt sich automatisch an die Darstellungseinstellungen deines Betriebssystems an. </TabsContent> </Tabs>
2. Viel Spaß beim Steppen!</Steps>