Example

Un exemple en direct d'un composant, avec son titre, sa description et son code, fermé jusqu'à ce que la personne le demande.

Sur cette page

Playground

Principal

L’action pour laquelle l’écran existe.

Afficher le code

HTML

<button class="feitio-button" type="button" data-variant="primary">Enregistrer</button>

Fond

HTML

<div class="feitio-example"><div class="live"><button class="feitio-button" type="button" data-variant="primary">Enregistrer</button></div><div class="about"><h3 id="pg-ex">Principal</h3><p>L’action pour laquelle l’écran existe.</p><details><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Afficher le code</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;Enregistrer&lt;/button&gt;</code></pre></div></details></div></div>

Quand l'utiliser

Sur chaque page de composant : chaque variation ou situation dans un Exemple.

Quand ne pas l'utiliser

Pour comparer le bien et le mal : la paire "Faire / Ne pas faire".

Exemples

Un exemple

Cette boîte très précise : le composant en direct en haut ; en dessous, le titre (qui entre dans l'ancrage), l'explication et "Montrer le code".

Afficher le code

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>

Règles

L'exemple est le composant réel, fonctionnel, pas une image.
Le titre possède un id : il entre dans l'ancrage comme sous-section de "Exemples".
Le code affiché est le minimum pour le reproduire, sans les éléments réservés à la documentation.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-example"`	obligatoire	La boîte d'exemple.
`class="live"`	la zone du haut	Le composant fonctionnel.
`class="about"`	la zone du bas	Le titre, l'explication et le code.