Statut
Component checklist
Usage
<dsa-copy-button value="Texte à copier"></dsa-copy-button>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/copy-button/copy-button.js';
import type { DSACopyButton } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser le composant bouton icône
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
copyLabel copy-label |
Un libéllé personnalisé pour le bouton |
string |
'' |
|
disabled |
Désactive le bouton |
boolean |
false |
|
errorLabel error-label |
Un message d'erreur personnalisé |
string |
'' |
|
from |
Un id qui référence un élément du document à partir duquel les données seront copiées. Si cet élément et value sont tous deux présents, cette valeur sera prioritaire. Par défaut, le textContent de l'élément cible sera copié. Pour copier un attribut, ajoutez son nom entre crochets, par exemple from="el[value]". Pour copier une propriété, ajoutez un point et le nom de la propriété, par exemple from="el.value". | string |
string
|
'' |
|
hoist |
Activez cette option pour empêcher que l'info-bulle ne soit tronquée lorsque le composant est placé dans un conteneur avec overflow:auto |hidden | scroll. Le hoist utilise une stratégie de positionnement fixe qui fonctionne dans de nombreux scénarios, mais pas dans tous. |
boolean |
false |
|
successLabel success-label |
Un message de succès personnalisé |
string |
'' |
|
size |
La taille du bouton |
small medium large
|
medium |
|
tooltipPlacement tooltip-placement |
L'emplacement préféré de l'info-bulle. Notez que l'emplacement réel peut varier selon les besoins pour conserver l'info-bulle à l'intérieur de la fenêtre |
'top' | 'top-start' |'top-end'| 'right'| 'right-start'| 'right-end'| 'bottom'| 'bottom-start'| 'bottom-end'| 'left'| 'left-start' | 'left-end' |
'top' |
|
value |
Le texte à copier |
string |
"" |