# Example

Ein lebendes Beispiel eines Components mit Titel, Erklärung und Code, geschlossen bis die Person fragt.

## Playground

```html
<div class="feitio-example"><div class="live"><button class="feitio-button" type="button" data-variant="primary">Änderungen speichern</button></div><div class="about"><h3 id="pg-ex">Primär</h3><p>Die Aktion, für die es den Bildschirm gibt.</p><details><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Code anzeigen</summary><div class="feitio-code" data-lang="html"><div class="bar"><span>HTML</span><button type="button" class="feitio-button copy" data-size="small" data-done-label="Copiado">Copiar</button></div><pre tabindex="0"><code>&lt;button class=&quot;feitio-button&quot; type=&quot;button&quot; data-variant=&quot;primary&quot;&gt;Änderungen speichern&lt;/button&gt;</code></pre></div></details></div></div>
```

## Wann verwenden

-   Auf jeder Component-Seite: jede Variation oder Situation in einem Beispiel.

## Wann nicht verwenden

-   **Zum Vergleich von richtig und falsch:** das "Do / Don't"-Paar.

## Beispiele

### Eine Beispiel

Dieser sehr Kasten: das Live-Komponente oben; unten der Titel (der in den Anker geht), die Erklärung und "Code anzeigen".

Code anzeigen

```html
<div class="feitio-example">
  <div class="live">…o componente…</div>
  <div class="about">
    <h3 id="ex-salvar">Principal</h3>
    <p>…</p>
    <details><summary>…Mostrar código</summary><div class="feitio-code">…</div></details>
  </div>
</div>
```

## Regeln

-   Die Beispiel ist das echte Komponente, funktionierend, nicht ein Bild.
-   Der Titel hat ein `id`: er wird als Untersektion des "Beispiele" im Anker eingefügt.
-   Der Code gezeigt ist das Minimum zur Reproduktion, ohne nur Dokumentations-bedingte Bits.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-example"`

erforderlich

Das Beispiel-Kasten.

`class="live"`

der obere Bereich

Die funktionierende Komponente.

`class="about"`

der untere Bereich

Der Titel, die Erklärung und der Code.