Clipboard Presse-papiers
Introduction
Le composant Clipboard est un conteneur de texte en lecture seule associé à un déclencheur d'action de copie dans le presse-papiers. Il propose des changements d'état d'indicateurs visuels intégrés et réactifs (états copié/non copié) pour fournir un retour immédiat aux utilisateurs copiant des commandes de terminal, des clés API, des jetons ou des liens.
Le Clipboard est entièrement intégré en tant que bloc clipboard dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de configurer facilement des libellés descriptifs, des valeurs de copie, des délais d'action et des thèmes de couleurs directement dans le CMS.
Utilisation
Ces exemples illustrent comment les éditeurs de contenu lient et structurent les éléments de copie dans le presse-papiers.
1. Commande de clonage de code standard
Un extrait de commande de terminal standard ou de clonage Git accompagné d'un déclencheur de copie visuel.
{
"type": "clipboard",
"label": "Clone Command",
"value": "git clone https://github.com/honojs/honox",
"interactive": true
}
2. Presse-papiers de clé API avec délai personnalisé (thème violet)
Démontre une configuration de plateforme de couleur personnalisée avec un délai de réinitialisation d'état personnalisé plus rapide fixé à 1500 millisecondes.
{
"type": "clipboard",
"label": "Production API Key",
"value": "pk_live_51HxF4pE2",
"colorPalette": "purple",
"timeout": 1500,
"interactive": true
}
3. Configuration compacte en lecture seule
Idéal pour intégrer des URL compactes ou des ID système dans des barres latérales de tableau de bord serrées ou des mises en page de métadonnées compactes.
{
"type": "clipboard",
"label": "Endpoint URL",
"value": "https://api.acme.com/v1/deploy",
"size": "sm",
"interactive": true
}
Propriétés
| Propriété | Type de champ CMS | Défaut | Description / Options prises en charge |
|---|---|---|---|
Texte du libellé (label) | string | - | Le texte d'en-tête visuel rendu directement au-dessus du champ de saisie en lecture seule. |
Valeur de copie (value) | string | - | La valeur texte réelle copiée dans le presse-papiers système de l'utilisateur lors du clic sur le déclencheur. |
Délai d'expiration (timeout) | number | 3000 | Durée en millisecondes pendant laquelle l'état de coche "Copié" reste actif avant de revenir en arrière. |
Thème de couleur (colorPalette) | select | "green" | Accent de couleur visuel appliqué au déclencheur de copie lorsqu'il bascule sur actif. • Options : blue, green, red, purple, orange, amber, cyan, slate. |
Échelle de taille (size) | select | "md" | Contrôle la hauteur globale, le remplissage et l'échelle du texte. • Options : "sm", "md", "lg". |
Forcer interactif (interactive) | boolean | true | Assure l'hydratation côté client en tant qu'îlot interactif Preact afin que les actions de clic déclenchent une copie instantanée. |
Notes pour les développeurs et accessibilité
- Libellé accessible et annonces d'état : Sous le capot, ce composant gère nativement l'accessibilité du lecteur d'écran :
- Le déclencheur du bouton de copie reçoit des mises à jour
aria-labellocalisées (bascule entre"Copy to clipboard"/"Copied to clipboard"), garantissant que les lecteurs d'écran annoncent immédiatement les changements d'état.
- Le déclencheur du bouton de copie reçoit des mises à jour
- Sélection au focus et saisies en lecture seule : Le champ de saisie reste focalisable (
readOnlyplutôt quedisabled). Lorsqu'il est focalisé, il sélectionne automatiquement son texte interne complet afin que les utilisateurs clavier puissent copier manuellement le contenu avecCtrl+CouCmd+C. - Marqueurs d'état actif : Un attribut
data-copiedest dynamiquement reflété sur le conteneur externe et tous les éléments descendants lorsqu'il est actif, facilitant le style CSS personnalisé pendant la copie.