Hinweisboxen
Erfahren Sie, wie Sie die Komponenten Note, Tip, Warning, Danger, Check und eigene Callouts nutzen, um wichtige Informationen in Ihrer Dokumentation hervorzuheben.
Verwenden Sie Hinweisboxen, um wichtige Kontextinformationen wie Warnungen, Tipps oder Voraussetzungen hervorzuheben, ohne den Lesefluss zu unterbrechen.
Verfügbare Callouts
Note: Hilfreicher Kontext oder zusätzliche Informationen.
Info: Neutrale Informationen oder Fakten. Für ergänzende Details verwenden.
Tip: Empfohlene Vorgehensweisen oder Optimierungen.
Warning: Wichtige Einschränkungen oder Voraussetzungen. Verwenden Sie diese Box, wenn das Ignorieren eines Hinweises Probleme verursachen könnte.
Danger: Kritische Warnungen. Verwenden Sie diese Box für Aktionen, die zu Datenverlust oder Sicherheitsproblemen führen könnten.
Check: Erfolgsbestätigungen. Verwenden Sie diese Box, um korrektes Verhalten oder einen erfolgreichen Abschluss zu bestätigen.
Verwendung
<Note>
This is helpful context for the reader.
</Note>
<Warning>
This could cause issues if you skip this step.
</Warning>
<Danger>
This action cannot be undone. Proceed with caution.
</Danger>Mit Titeln
Fügen Sie jeder Hinweisbox einen eigenen Titel hinzu:
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>You can use Markdown inside callouts, including code and links.
Mit Codeblöcken
Hinweisboxen können Code enthalten:
The getData() function signature changed:
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })Best Practices
Zu viele Hinweisboxen verwässern ihre Wirkung. Streben Sie maximal 1–2 pro Seite an.
Reservieren Sie Hinweisboxen für Informationen, die der Leser nicht übersehen darf.
| Scenario | Callout |
|---|---|
| Helpful tip | <Tip> |
| Extra context | <Note> or <Info> |
| Potential gotcha | <Warning> |
| Irreversible action | <Danger> |
| Confirmation | <Check> |
| Custom branding | <Callout> |
Halten Sie Hinweisboxen überschaubar. Verwenden Sie ein Accordion für mehrere Absätze.
Gut: Ein bis zwei Sätze Vermeiden: Mehrere Absätze Text
Platzieren Sie Hinweisboxen:
- Vor Code mit Voraussetzungen
- Nach Anleitungen mit wichtigen Einschränkungen
- Nahe dem Inhalt, auf den sie sich beziehen
Props
Jede Hinweisbox akzeptiert diese Props:
Eigener Titel (ersetzt den Standardtitel).
Barrierefreiheit
Hinweisboxen verwenden semantisches HTML und ARIA-Rollen:
- Screenreader kündigen den Typ der Hinweisbox an
- Farbe ist nicht das einzige Unterscheidungsmerkmal (Icons sind enthalten)
- Ausreichender Farbkontrast im Dunkelmodus
Benutzerdefinierter Callout
Legen Sie mit der Komponente Callout ein eigenes Icon und eine eigene Farbe fest:
Custom: Use any icon and color to match your content.
Deploy your changes with confidence using our CI/CD pipeline.
Use icon style prefixes like regular/, light/, or duotone/ for different weights.
Verwendung benutzerdefinierter Callouts
<Callout icon="key" color="#FFC107">
This callout uses a key icon with amber color.
</Callout>
<Callout icon="rocket" color="#9333EA">
This callout uses a rocket icon with purple color.
</Callout>
<Callout icon="regular/star" color="#EC4899">
Use style prefixes for different icon weights.
</Callout>Props benutzerdefinierter Callouts
Icon-Name (siehe Icons).
Hex-Farbcode (z. B. #FFC107). Standardmäßig die Akzentfarbe.
Icon-Stilpräfixe: Fügen Sie ein Präfix hinzu, um die Strichstärke des Icons zu ändern:
solid/- Gefüllte Icons (Standard)regular/- Umrissene Iconslight/- Dünn umrissene Iconsduotone/- Zweifarbige Icons