Doc Example Stable

Die Doc Example Komponente dient zur Dokumentation von UI-Komponenten. Sie kombiniert eine Vorschau mit dem dazugehörigen Quellcode und optionalen Werkzeugen wie dem Copy-Button.

Beispiele

Basic

Standardverwendung der Doc Example Komponente.


<button class="a-button -primary -blue">
    <span class="a-button__label">
        Speichern
    </span>
</button>

Die Toolbar ermöglicht zusätzliche Aktionen wie das Kopieren des Beispielcodes.


<button class="a-button -secondary -blue">
    <span class="a-button__label">
        Bearbeiten
    </span>
</button>

Multiple Components

Mehrere Komponenten können in einem Beispiel gezeigt werden.

Stable


<button class="a-button -primary -blue">
    <span class="a-button__label">
        Speichern
    </span>
</button>

<span class="a-badge -success">
    Stable
</span>

Klassen

Klasse	Beschreibung
`.o-doc-example`	Container der Dokumentationskomponente.
`.o-doc-example__preview`	Bereich für die Vorschau.
`.o-doc-example__code`	Bereich für den Quellcode.
`.o-doc-example__toolbar`	Werkzeugleiste oberhalb des Codes.

Hinweise

Die Doc Example Komponente wird innerhalb der Dokumentation verwendet, um Vorschau und Quellcode gemeinsam darzustellen.

Best Practices

Verwende realistische Beispiele. Die Vorschau sollte exakt dem gezeigten Quellcode entsprechen.

Vorschau und Code sollten niemals voneinander abweichen. Andernfalls wird die Dokumentation verwirrend.

Accessibility

Interaktive Elemente innerhalb der Vorschau sollten dieselben Accessibility-Anforderungen erfüllen wie in produktiven Anwendungen.