Statut
dsa-tag
Component checklist
Usage
<dsa-tag label="Tag"></dsa-tag>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/tag/tag.js'
import type { DSATag } from '@ds-autonomie/web-components'
</script>
API
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleName accessible-name |
Un nom accessible pour le tag. A utiliser en particulier si vous utilisez des caractères spéciaux mal interprétés pas les lecteurs d'écran. |
string |
'' |
|
label |
Le label du tag |
string |
'' |
|
removable |
Rend le tag amovible et affiche le bouton de suppression |
boolean |
false |
|
size |
La taille du tag |
'small' |'medium'| 'large' |
medium |
|
tooltip |
Affiche une tooltip avec le libellé complet au hover ou à l'activation du tag. |
boolean |
false |
|
variant |
Variante thématique du tag |
purple-100 purple-200 purple-300 purple-400 blue-100 blue-200 blue-300 blue-400 orange-100 orange-200 orange-300 orange-400 pink-100 pink-200 pink-300 pink-400 yellow-100 yellow-200 yellow-300 yellow-400 green-100 green-200 green-300 green-400 neutral-100 neutral-200 neutral-300 neutral-400 |
purple-100 |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
prefix |
Utilisé pour ajouter une icône de présentation ou un élément similaire au champs de saisie avant le label |
|
suffix |
Utilisé pour ajouter une icône de présentation ou un élément similaire au champs de saisie après le label |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
dsa-remove |
Émis lorsque le boutton de suppression est activé |
dsa-tag-button
Component checklist
Usage
<dsa-tag-button href="#" label="Tag"></dsa-tag-button>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/tag-button/tag-button.js'
import type { DSATagButton } from '@ds-autonomie/web-components'
</script>
API
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleName accessible-name |
Fournit un libellé textuel alternatif au bouton pour une meilleure accessibilité. |
string |
- |
|
description |
Fournit une description au bouton pour une meilleure accessibilité. |
string |
'' |
|
download |
Indique que la cible sera téléchargée lorsqu'un utilisateur clique sur l'hyperlien. |
string |
'' |
|
href |
Rend la balise cliquable et agit comme un lien. Spécifie l'URL de la page vers laquelle le lien renvoie. |
string |
'' |
|
label |
Le label du tag |
string |
'' |
|
rel |
Indique la relation entre le document actuel et le document lié |
string |
'' |
|
size |
La taille du tag |
'small' |'medium'| 'large' |
medium |
|
target |
Indique où ouvrir le document lié. |
string |
'' |
|
variant |
Stylise le tag |
'neutral' | 'active' |
'neutral' |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
|
Nom |
Description |
Type |
|---|---|---|
|
blur() |
Enlève le focus du tag |
() => void |
|
click()
|
Simule un click sur le tag |
() => void |
|
focus() |
Met le focus sur le tag |
(options?: FocusOptions) => void |
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
prefix |
Utilisé pour ajouter une icône de présentation ou un élément similaire au tag avant le label |
|
suffix |
Utilisé pour ajouter une icône de présentation ou un élément similaire au tag après le label |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
dsa-blur |
Émis lorsque le tag perd le focus |
|
dsa-focus |
Émis lorsque le tag obtient le focus
|
L’élément dsa-anchor-tag est déprécié et sera supprimé lors de la prochaine version majeure.
Vous pouvez dès à présent utiliser l'élément dsa-tag-button à sa place.
Vous pouvez dès à présent utiliser l'élément dsa-tag-button à sa place.
dsa-anchor-tag
Component checklist
Unable to show component checklist block
Please select properties to show.
Please select properties to show.
Usage
<dsa-anchor-tag href="#" label="Tag"></dsa-anchor-tag>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/anchor-tag/anchor-tag.js'
import type { DSAAnchorTag } from '@ds-autonomie/web-components'
</script>
API
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
download |
Indique que la cible sera téléchargée lorsqu'un utilisateur clique sur l'hyperlien. |
string |
'' |
|
href |
Rend la balise cliquable et agit comme un lien. Spécifie l'URL de la page vers laquelle le lien renvoie. |
string |
'' |
|
hreflang |
Spécifie la langue du document lié |
string |
'' |
|
label |
Le label du tag |
string |
'' |
|
ping |
Spécifie une liste d'URL séparées par des espaces vers lesquelles, lorsque le lien est suivi, des requêtes postales avec le corps ping seront envoyées par le navigateur (en arrière-plan). Généralement utilisé pour le suivi. |
string |
'' |
|
rel |
Indique la relation entre le document actuel et le document lié |
string |
'' |
|
referrerpolicy |
Rend le tag amovible et Spécifie les informations de référence à envoyer avec le lien |
string |
'' |
|
size |
La taille du tag |
'small' |'medium'| 'large' |
medium |
|
target |
Indique où ouvrir le document lié. Fonctionne lorsque la balise est cliquable. |
string |
'' |
|
type |
Précise le type de support du document lié |
string |
'' |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
prefix |
Utilisé pour ajouter une icône de présentation ou un élément similaire au champs de saisie avant le label |
|
suffix |
Utilisé pour ajouter une icône de présentation ou un élément similaire au champs de saisie après le label |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant ne propose pas d’événements.