CodeBlock
Código con colores y el botón Copiar, en su propia barra que nombra el lenguaje.
En esta página
Playground
<button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button>Lenguaje
Fondo
<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><button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button></code></pre></div>Cuándo usarlo
- Para cada fragmento de código que la persona lea o copie: un ejemplo, un comando, una configuración.
Cuándo no usarlo
- Para un nombre dentro de una oración (
data-size): código en línea, sin bloque.
Ejemplos
<button type="submit" class="feitio-button" data-variant="primary">
Salvar alterações
</button>HTML
Los colores provienen de los roles de Feitio: la etiqueta en texto naranja, el atributo en musgo, el valor en tinta. Copiar dice "Copiado" en el botón mismo y copia texto plano.
Mostrar código
<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/feitioCon el gestor de paquetes
Para comandos de instalación, la barra ofrece npm, pnpm, yarn y bun; la elección se aplica en todo el sitio y se recuerda.
Mostrar código
<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>Anatomía
<a href="/">- Bar: el idioma, o la elección del gestor de paquetes.
- Copiar: pequeño, al final de la barra; dice "Copiado" en su lugar.
- El código, en los colores del rol.
Accesibilidad
- El bloque se desliza lateralmente por sí mismo; la página nunca lo hace.
- "Copiado" aparece en el botón, donde está la vista y el foco.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-code" | obligatorio | El bloque. |
data-lang | "html", "jsx", "css", "shell" | ¿Qué colores? HTML y JSX obtienen los colores de las etiquetas. |
class="copy" | el botón | Copia texto plano. |
data-pm | sobre cada <pre> | Un comando por gestor de paquetes. |