Clipboard Portapapeles
Introducción
El componente Clipboard es un contenedor de texto de solo lectura emparejado con un disparador de acción de copiar al portapapeles. Cuenta con cambios de estado de indicadores visuales integrados y responsivos (estados copiado/no copiado) para proporcionar retroalimentación inmediata a los usuarios que copian comandos de terminal, claves de API, tokens o enlaces.
El Clipboard está totalmente integrado como un bloque clipboard en el Page Builder, permitiendo a los autores de contenido y desarrolladores configurar fácilmente etiquetas descriptivas, valores de copia, tiempos de espera de acción y temas de color directamente dentro del CMS.
Uso
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran elementos de copiar al portapapeles.
1. Comando de clonación de código estándar
Un fragmento de comando de terminal estándar o de clonación de Git acompañado de un disparador de copia visual.
{
"type": "clipboard",
"label": "Clone Command",
"value": "git clone https://github.com/honojs/honox",
"interactive": true
}
2. Portapapeles de clave API con tiempo de espera personalizado (tema púrpura)
Demuestra una configuración de plataforma de color personalizado con un tiempo de reinicio de estado personalizado más rápido, configurado en 1500 milisegundos.
{
"type": "clipboard",
"label": "Production API Key",
"value": "pk_live_51HxF4pE2",
"colorPalette": "purple",
"timeout": 1500,
"interactive": true
}
3. Configuración compacta de solo lectura
Ideal para incrustar URL compactas o ID de sistema en barras laterales de tablero ajustadas o diseños de metadatos compactos.
{
"type": "clipboard",
"label": "Endpoint URL",
"value": "https://api.acme.com/v1/deploy",
"size": "sm",
"interactive": true
}
Propiedades
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / Opciones admitidas |
|---|---|---|---|
Texto de etiqueta (label) | string | - | El texto de encabezado visual renderizado directamente encima del campo de entrada de solo lectura. |
Valor de copia (value) | string | - | El valor de texto real copiado al portapapeles del sistema del usuario al hacer clic en el disparador. |
Retardo de tiempo de espera (timeout) | number | 3000 | Duración en milisegundos que permanece activo el estado visual de "Copiado" antes de revertirse. |
Tema de color (colorPalette) | select | "green" | Acento de color visual aplicado al disparador de copia cuando se alterna a activo. • Opciones: blue, green, red, purple, orange, amber, cyan, slate. |
Escala de tamaño (size) | select | "md" | Controla la altura general, el relleno y la escala del texto. • Opciones: "sm", "md", "lg". |
Forzar interactivo (interactive) | boolean | true | Garantiza la hidratación del lado del cliente como una isla interactiva de Preact para que las acciones de clic desencadenen la copia instantánea. |
Notas para desarrolladores y accesibilidad
- Etiquetas accesibles y anuncios de estado: En segundo plano, este componente maneja la accesibilidad del lector de pantalla de forma nativa:
- El disparador del botón de copia recibe actualizaciones de
aria-labellocalizadas (alternando entre"Copy to clipboard"/"Copied to clipboard"), asegurando que los lectores de pantalla anuncien los cambios de estado de inmediato.
- El disparador del botón de copia recibe actualizaciones de
- Selección al enfocar y entradas de solo lectura: El campo de entrada permanece enfocable (
readOnlyen lugar dedisabled). Al enfocarse, selecciona automáticamente su texto interno completo para que los usuarios de teclado puedan copiar contenido manualmente usandoCtrl+CoCmd+C. - Marcadores de estado activo: Un atributo
data-copiedse refleja dinámicamente en el contenedor externo y todas las partes descendientes cuando está activo, facilitando el estilo CSS personalizado durante la copia.