CodeBlock
Code mit Farben und der Kopier-Button in seiner eigenen Leiste, die die Sprache benennt.
Auf dieser Seite
Playground
<button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button>Sprache
Hintergrund
<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="Kopiert">Kopieren</button></div><pre tabindex="0"><code><button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button></code></pre></div>Wann verwenden
- Für jeden Code-Schnipsel, den die Person lesen oder kopieren wird: ein Beispiel, ein Befehl, eine Konfiguration.
Wann nicht verwenden
- Für einen Namen innerhalb eines Satzes (
data-size): Inline-Code, ohne Block.
Beispiele
<button type="submit" class="feitio-button" data-variant="primary">
Salvar alterações
</button>HTML
Farben stammen aus Feitios Rollen: das Tag im Text orange, das Attribut in Moos, der Wert in Tinte. Kopie sagt "Kopiert" auf dem Button selbst und kopiert einfachen Text.
Code anzeigen
<div class="feitio-code" data-lang="html">
<div class="bar"><span>HTML</span><button type="button" class="feitio-button copy" data-size="small">Copiar</button></div>
<pre><code>…</code></pre>
</div>npm install @made-by-maid/feitiopnpm add @made-by-maid/feitioyarn add @made-by-maid/feitiobun add @made-by-maid/feitioMit dem Paketmanager
Für Install-Befehle bietet die Leiste npm, pnpm, yarn und bun an; die Wahl gilt site-wide und wird erinnert.
Code anzeigen
<div class="feitio-code" data-lang="shell">
<div class="bar"><span class="feitio-segmented" role="group" aria-label="Gerenciador de pacotes">…</span>…</div>
<pre data-pm="npm"><code>npm install @made-by-maid/feitio</code></pre>
<pre data-pm="pnpm" hidden>…</pre>
</div>Anatomie
<a href="/">- Balken: die Sprache oder der Paketmanager-Wahl.
- Kopieren: klein, am Ende des Balkens; sagt "Kopiert" anstelle.
- Der Code, in den Rollenfarben.
Barrierefreiheit
- Der Block scrollt seitwärts von selbst; die Seite tut das nie.
- "Kopiert" erscheint auf der Schaltfläche, wo Auge und Fokus sind.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-code" | erforderlich | Der Block. |
data-lang | "html", "jsx", "css", "shell" | Welche Farben; HTML und JSX erhalten Tag-Farben. |
class="copy" | die Schaltfläche | Kopiert einfachen Text. |
data-pm | auf jedem <pre> | Eins Befehl pro Paketmanager. |