CodeBlock
Código com cores e o botão Copiar, numa barra própria que diz a linguagem.
Nesta página
Playground
<button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button>Linguagem
Fundo
<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>Quando usar
- Para todo trecho de código que a pessoa vai ler ou copiar: um exemplo, um comando, uma configuração.
Quando não usar
- Para um nome dentro de uma frase (
data-size): o código em linha, sem bloco.
Exemplos
<button type="submit" class="feitio-button" data-variant="primary">
Salvar alterações
</button>HTML
As cores saem dos papéis do Feitio: a tag no laranja de texto, o atributo em musgo, o valor na tinta. O Copiar diz "Copiado" no próprio botão e copia o texto puro.
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/feitioCom o gerenciador de pacotes
Para comandos de instalação, a barra traz npm, pnpm, yarn e bun; a escolha vale para todo o site e fica guardada.
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>Anatomia
<a href="/">- Barra: a linguagem, ou a escolha do gerenciador.
- Copiar: pequeno, na ponta da barra; diz "Copiado" no lugar.
- O código, com as cores dos papéis.
Acessibilidade
- O bloco rola sozinho para o lado; a página nunca.
- O "Copiado" aparece no botão, onde o olho e o foco estão.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-code" | obrigatório | O bloco. |
data-lang | "html", "jsx", "css", "shell" | Quais cores; HTML e JSX ganham cores de tag. |
class="copy" | o botão | Copia o texto puro. |
data-pm | em cada <pre> | Um comando por gerenciador. |