Aside Komponente
Die Aside-Komponente hebt wichtige Informationen hervor und lenkt die Aufmerksamkeit der Leser auf spezifische Inhalte. Sie ist perfekt für Tipps, Warnungen, Hinweise und andere ergänzende Informationen.
Grundlegende Verwendung
<Aside variant="info"> Dies ist ein standardmäßiger Aside-Block mit wichtigen Informationen.</Aside>Info
Dies ist ein standardmäßiger Aside-Block mit wichtigen Informationen.
Varianten
Die Aside-Komponente unterstützt verschiedene Varianten für unterschiedliche Arten von Informationen:
Info (Information)
<Aside variant="info"> **Information**: Dies ist eine allgemeine Information oder Notiz für die Leser.</Aside>Info
Information: Dies ist eine allgemeine Information oder Notiz für die Leser.
Tip (Tipp)
<Aside variant="tip"> **Pro-Tipp**: Verwenden Sie Tastenkombinationen, um Ihre Produktivität zu steigern!</Aside>Tip
Pro-Tipp: Verwenden Sie Tastenkombinationen, um Ihre Produktivität zu steigern!
Caution (Vorsicht)
<Aside variant="caution"> **Vorsicht**: Diese Aktion kann nicht rückgängig gemacht werden. Stellen Sie sicher, dass Sie eine Sicherungskopie haben.</Aside>Caution
Vorsicht: Diese Aktion kann nicht rückgängig gemacht werden. Stellen Sie sicher, dass Sie eine Sicherungskopie haben.
Danger (Gefahr)
<Aside variant="danger"> **Warnung**: Dies wird alle Ihre Daten dauerhaft löschen!</Aside>Danger
Warnung: Dies wird alle Ihre Daten dauerhaft löschen!
Info (Information)
<Aside variant="info"> **Information**: Diese Funktion ist in Version 2.0 und höher verfügbar.</Aside>Info
Information: Diese Funktion ist in Version 2.0 und höher verfügbar.
Praktische Beispiele
Code-Warnungen
<Aside variant="caution"> **Wichtig**: Stellen Sie sicher, dass Sie die Umgebungsvariablen gesetzt haben, bevor Sie diesen Code ausführen.</Aside>
```bashnpm run deploy### Versionshinweise
```mdx<Aside variant="info"> **Neue Funktion**: Diese API ist seit Version 2.1 verfügbar und bietet erweiterte Filteroptionen.</Aside>Bewährte Praktiken
<Aside variant="tip"> **Bewährte Praktik**: Verwenden Sie aussagekräftige Variablennamen, um Ihren Code selbstdokumentierend zu machen.</Aside>Häufige Fallstricke
<Aside variant="caution"> **Häufiger Fehler**: Vergessen Sie nicht, `await` vor asynchronen Funktionsaufrufen zu verwenden, sonst erhalten Sie ein Promise-Objekt statt des erwarteten Werts.</Aside>Sicherheitshinweise
<Aside variant="danger"> **Sicherheitswarnung**: Speichern Sie niemals API-Schlüssel in Ihrem Frontend-Code oder öffentlichen Repositories.</Aside>Mit Markdown-Inhalt
Die Aside-Komponente unterstützt vollständiges Markdown, einschließlich Links, Listen und Code:
<Aside variant="tip"> **Nützliche Ressourcen**:
- [Offizielle Dokumentation](https://tajo.io/docs) - [GitHub Repository](https://github.com/tajo) - [Community Forum](https://forum.tajo.io)
Sie können auch `Code-Beispiele` und andere Markdown-Elemente verwenden.</Aside>Tip
Nützliche Ressourcen:
Sie können auch Code-Beispiele und andere Markdown-Elemente verwenden.
Verschachtelte Asides
Vermeiden Sie die Verschachtelung von Aside-Komponenten. Verwenden Sie stattdessen eine einzelne Aside-Komponente mit strukturiertem Inhalt:
<!-- ❌ Nicht empfohlen --><Aside variant="tip"> Ein Tipp <Aside variant="caution"> Eine Warnung innerhalb eines Tipps </Aside></Aside>
<!-- ✅ Empfohlen --><Aside variant="tip"> **Tipp mit Warnung**:
Dies ist ein hilfreicher Tipp, aber beachten Sie: Seien Sie vorsichtig mit diesem speziellen Aspekt.</Aside>Accessibility
Die Aside-Komponente ist vollständig zugänglich und:
- Verwendet semantische HTML-Elemente
- Bietet angemessene Farb-Kontraste für alle Varianten
- Ist mit Screenreadern kompatibel
- Unterstützt Tastaturnavigation für interaktive Elemente
Bewährte Praktiken
- Sparsam verwenden: Zu viele Asides können ablenkend wirken
- Relevante Varianten: Wählen Sie die Variante, die zur Art der Information passt
- Klare Überschriften: Verwenden Sie aussagekräftige Überschriften in fetter Schrift
- Angemessene Platzierung: Platzieren Sie Asides in der Nähe des relevanten Inhalts
- Konsistente Sprache: Verwenden Sie konsistente Begriffe für ähnliche Arten von Informationen
Wann welche Variante verwenden
| Variante | Verwendung | Beispiele |
|---|---|---|
note | Allgemeine Informationen | Hinweise, Erklärungen, Kontext |
tip | Hilfreiche Tipps | Pro-Tipps, Shortcuts, bewährte Praktiken |
caution | Vorsichtsmaßnahmen | Wichtige Überlegungen, potenzielle Probleme |
danger | Kritische Warnungen | Datenverlust, Sicherheitsrisiken, irreversible Aktionen |
info | Sachliche Informationen | Versionshinweise, Verfügbarkeit, technische Details |
Diese Richtlinien helfen dabei, die richtige Variante für Ihren Anwendungsfall zu wählen und eine konsistente Benutzererfahrung zu gewährleisten.