Example

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

Auf dieser Seite

Playground

Primär

Die Aktion, für die es den Bildschirm gibt.

Code anzeigen

HTML

<button class="feitio-button" type="button" data-variant="primary">Änderungen speichern</button>

Hintergrund

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.