Clipboard Área de Transferência
Introdução
O componente Clipboard é um contêiner de texto somente leitura emparelhado com um gatilho de ação de copiar para a área de transferência. Ele apresenta alterações de estado de indicadores visuais integrados e responsivos (estados copiado/não copiado) para fornecer feedback imediato aos usuários que copiam comandos de terminal, chaves de API, tokens ou links.
O Clipboard está totalmente integrado como um bloco clipboard no Page Builder, permitindo que autores de conteúdo e desenvolvedores configurem facilmente rótulos descritivos, valores de cópia, tempos limite de ação e temas de cor diretamente no CMS.
Uso
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam elementos de copiar para a área de transferência.
1. Comando de clonagem de código padrão
Um snippet de comando de terminal padrão ou de clonagem Git acompanhado de um gatilho de cópia visual.
{
"type": "clipboard",
"label": "Clone Command",
"value": "git clone https://github.com/honojs/honox",
"interactive": true
}
2. Área de transferência de chave de API com tempo limite personalizado (tema roxo)
Demonstra uma configuração de plataforma de cor personalizada com um tempo de redefinição de estado personalizado mais rápido definido para 1500 milissegundos.
{
"type": "clipboard",
"label": "Production API Key",
"value": "pk_live_51HxF4pE2",
"colorPalette": "purple",
"timeout": 1500,
"interactive": true
}
3. Configuração compacta somente leitura
Ideal para incorporar URLs compactas ou IDs de sistema em barras laterais de painéis apertadas ou layouts de metadados compactos.
{
"type": "clipboard",
"label": "Endpoint URL",
"value": "https://api.acme.com/v1/deploy",
"size": "sm",
"interactive": true
}
Propriedades
| Propriedade | Tipo de campo CMS | Padrão | Descrição / Opções suportadas |
|---|---|---|---|
Texto do rótulo (label) | string | - | O texto de cabeçalho visual renderizado diretamente acima do campo de entrada somente leitura. |
Valor de cópia (value) | string | - | O valor de texto real copiado para a área de transferência do sistema do usuário ao clicar no gatilho. |
Atraso de tempo limite (timeout) | number | 3000 | Duração em milissegundos que o estado visual de "Copiado" permanece ativo antes de reverter. |
Tema de cor (colorPalette) | select | "green" | Acento de cor visual aplicado ao gatilho de cópia quando alternado para ativo. • Opções: blue, green, red, purple, orange, amber, cyan, slate. |
Escala de tamanho (size) | select | "md" | Controla a altura geral, o preenchimento e a escala do texto. • Opções: "sm", "md", "lg". |
Forçar interativo (interactive) | boolean | true | Garante a hidratação do lado do cliente como uma ilha interativa do Preact para que as ações de clique disparem a cópia instantânea. |
Notas para desenvolvedores e acessibilidade
- Rótulo acessível e anúncios de estado: Nos bastidores, este componente lida nativamente com a acessibilidade do leitor de tela:
- O gatilho do botão de cópia recebe atualizações de
aria-labellocalizadas (alternando entre"Copy to clipboard"/"Copied to clipboard"), garantindo que os leitores de tela anunciem as mudanças de estado imediatamente.
- O gatilho do botão de cópia recebe atualizações de
- Seleção ao focar e entradas somente leitura: O campo de entrada permanece focável (
readOnlyem vez dedisabled). Quando focado, ele seleciona automaticamente seu texto interno completo para que os usuários de teclado possam copiar o conteúdo manualmente usandoCtrl+CouCmd+C. - Marcadores de estado ativo: Um atributo
data-copiedé dinamicamente espelhado no contêiner externo e em todas as partes descendentes quando ativo, facilitando a estilização CSS personalizada durante a cópia.