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>
```bash
npm 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

VarianteVerwendungBeispiele
noteAllgemeine InformationenHinweise, Erklärungen, Kontext
tipHilfreiche TippsPro-Tipps, Shortcuts, bewährte Praktiken
cautionVorsichtsmaßnahmenWichtige Überlegungen, potenzielle Probleme
dangerKritische WarnungenDatenverlust, Sicherheitsrisiken, irreversible Aktionen
infoSachliche InformationenVersionshinweise, 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.