Statut
Component checklist
Usage
<dsa-switch>Recevoir la newsletter</dsa-switch>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/switch/switch.js';
import type { DSASwitch } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser le composant case à cocher
API
Attributs et propriétés
|
attribut
|
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
checked |
Affiche la switch comme sélectionnée |
boolean |
false |
|
defaultChecked |
La valeur par défaut du switch. Utile lors de la réinitialisation |
boolean |
false |
|
disabled |
Désactive le switch |
boolean |
false |
|
readonly |
Rend le switch en lecture seule |
boolean |
false |
|
form |
Par défaut, les contrôles de formulaire sont associés à l'élément de formulaire parent le plus proche. Cet attribut permet de placer le contrôle de formulaire en dehors d'un formulaire et de l'associer au formulaire qui a cet identifiant. Le formulaire doit être dans le même document ou racine fantôme pour que cela fonctionne |
string |
'' |
|
name |
Le nom du champ, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
|
labelOff label-off |
Text représentant l'état "désactivé" du switch, afin de faciliter la compréhension des utilisateurs |
string |
”Désactivé” |
|
labelOn label-on |
Text représentant l'état "activé" du switch, afin de faciliter la compréhension des utilisateurs |
string |
"Activé" |
|
required |
Rend le switch obligatoire |
boolean |
false |
|
size |
La taille du switch |
small medium large |
medium |
|
value |
La valeur du contrôle, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
Méthodes
|
Nom |
Description |
Type |
|
blur()
|
Enlève le focus du switch |
() => void |
|
click() |
Simule un click sur la switch |
() => void |
|
checkValidity() |
Vérifie la validité du switch mais ne montre pas de message de validation |
() => boolean |
|
focus() |
Met le focus sur le switch |
(options?: FocusOptions) => void |
|
getForm() |
Obtient le formulaire associé si il existe |
() => HTMLFormElement | null |
|
reportValidity() |
Vérifie la validité et montre le message du navigateur si le champ est invalide |
() => boolean |
|
setCustomValidity() |
Défini un message de validation personnalisé |
(message: string) => void |
Événements
|
Nom |
Description |
|---|---|
|
dsa-blur |
Émis lorsque le switch perd le focus |
|
dsa-change |
Émis lorsque la valeur du switch de saisie change |
|
dsa-focus |
Émis lorsque le switch obtient le focus |
|
dsa-input |
Émis lorsque le switch de saisie reçois une entrée |
|
dsa-invalid |
Émis lorsque le contrôle de formulaire vérifie la validité du switch et que les contraintes ne sont pas respectées |