Switch

Le composant Switch permet de basculer l'état (activé/désactivé) d'une option.

Utilisation

Importez le composant selon vos besoins :

import 'mdui/components/switch.js';

Importez le type TypeScript correspondant :

import type { Switch } from 'mdui/components/switch.js';

Exemple d'utilisation :

<mdui-switch></mdui-switch>

Exemples

État activé

Lorsque le switch est activé, l'attribut checked vaut true. Ajoutez checked pour qu'il soit activé par défaut.

<mdui-switch checked></mdui-switch>

Source

État désactivé

Ajoutez l'attribut disabled pour désactiver le switch.

<mdui-switch disabled></mdui-switch>
<mdui-switch disabled checked></mdui-switch>

Source

Icône

Utilisez les attributs unchecked-icon et checked-icon pour définir les icônes Material Icons correspondant à chaque état. Utilisez les slots associés pour une personnalisation avancée.

<mdui-switch unchecked-icon="remove_moderator" checked-icon="verified_user"></mdui-switch>
<mdui-switch>
  <mdui-icon slot="unchecked-icon" name="remove_moderator"></mdui-icon>
  <mdui-icon slot="checked-icon" name="verified_user"></mdui-icon>
</mdui-switch>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`disabled`	`disabled`	`boolean`	`false`
Si le composant est désactivé
`checked`	`checked`	`boolean`	`false`
Si le composant est coché (activé)
	`defaultChecked`	`boolean`	`false`
État coché par défaut. Lors de la réinitialisation du formulaire, il reviendra à cet état. Cette propriété ne peut être définie que par une propriété JavaScript.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nom de l'icône Material Icons pour l'état non coché. Peut également être défini via `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nom de l'icône Material Icons pour l'état coché. Peut également être défini via `slot="checked-icon"`. Par défaut, l'icône est `check`. Vous pouvez passer une chaîne vide pour supprimer l'icône par défaut.
`required`	`required`	`boolean`	`false`
Si ce Switch doit être coché lors de la soumission du formulaire
`form`	`form`	`string`	-
Élément `<form>` associé. La valeur de cet attribut doit être l'`id` d'un élément `<form>` dans la même page. Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément `<form>`. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément `<form>`.
`name`	`name`	`string`	`''`
Nom du Switch, qui sera envoyé avec les données du formulaire
`value`	`value`	`string`	`'on'`
Valeur du Switch, qui sera envoyée avec les données du formulaire
	`validity`	`ValidityState`	-
État de validation du formulaire, voir `ValidityState` pour plus de détails
	`validationMessage`	`string`	-
Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
`autofocus`	`autofocus`	`boolean`	`false`
Si le focus doit être automatiquement obtenu après le chargement de la page
`tabindex`	`tabIndex`	`number`	-
Ordre de l'élément lors de la navigation au clavier avec la touche Tab

Méthodes

Nom	Paramètres	Valeur de retour
`checkValidity`		`boolean`
Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie `false` et déclenche l'événement `invalid` ; sinon, renvoie `true`.
`reportValidity`		`boolean`
Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie `false` et déclenche l'événement `invalid` ; sinon, renvoie `true`. Si la validation échoue, un message d'erreur s'affiche également sur le composant.
`setCustomValidity`	`message: string`	`void`
Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
`click`		`void`
Simule un clic sur l'élément
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément. Vous pouvez passer un objet en paramètre, dont les propriétés incluent : `preventScroll` : Par défaut, après la prise de focus, la page défile pour amener l'élément à l'écran. Si vous ne souhaitez pas que la page défile, vous pouvez définir cette propriété sur `true`.
`blur`		`void`
Retire le focus de l'élément

Événements

Nom
`focus`
Se déclenche lorsque l'élément obtient le focus
`blur`
Se déclenche lorsque l'élément perd le focus
`change`
Se déclenche lorsque l'état de sélection change
`input`
Se déclenche lorsque l'état de sélection change
`invalid`
Se déclenche lorsque la validation du champ du formulaire échoue

Slots

Nom
`unchecked-icon`
Élément à l'état non coché
`checked-icon`
Élément à l'état coché

CSS Parts

Nom
`track`
Piste
`thumb`
Conteneur de l'icône
`unchecked-icon`
Icône de l'état non coché
`checked-icon`
Icône de l'état coché

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis de la piste du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
`--shape-corner-thumb`
Taille des coins arrondis du conteneur de l'icône du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.

Chapitre précédent

Snackbar

Chapitre suivant

Tabs