Chip

Le composant Chip permet de représenter des informations, de sélectionner des options, de filtrer du contenu ou de déclencher des actions associées.

Utilisation

Importez le composant :

import 'mdui/components/chip.js';

Importez le type TypeScript correspondant :

import type { Chip } from 'mdui/components/chip.js';

Exemple d'utilisation :

Chip

<mdui-chip>Chip</mdui-chip>

Ajoutez l'attribut deletable. Une icône de suppression apparaît alors à droite du chip. Cliquer sur cette icône déclenche l'événement delete. Vous pouvez personnaliser l'icône de suppression avec l'attribut delete-icon ou le slot delete-icon.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
Forme du Chip. Valeurs possibles : `assist` : Sert à afficher des actions d'assistance liées au contexte actuel, par exemple partager ou ajouter aux favoris. `filter` : Sert à filtrer le contenu, par exemple les résultats de recherche. `input` : Sert à représenter un fragment d'information saisi par l'utilisateur, par exemple un contact dans le champ "Destinataires" de Gmail. `suggestion` : Sert à proposer des suggestions générées dynamiquement pour simplifier les actions de l'utilisateur, par exemple des suggestions de messages dans une application de chat
`elevated`	`elevated`	`boolean`	`false`
Si l'ombre doit être affichée
`selectable`	`selectable`	`boolean`	`false`
Si la Chip peut être sélectionnée
`selected`	`selected`	`boolean`	`false`
Si la Chip est sélectionnée
`deletable`	`deletable`	`boolean`	`false`
Si la Chip peut être supprimée. Si `true`, une icône de suppression s'affiche à droite de la Chip.
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons à gauche. Peut également être défini via `slot="icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Nom de l'icône Material Icons à gauche à l'état sélectionné. Peut également être défini via `slot="selected-icon"`.
`end-icon`	`endIcon`	`string`	-
Nom de l'icône Material Icons à droite. Peut également être défini via `slot="end-icon"`.
`delete-icon`	`deleteIcon`	`string`	-
Lorsqu'elle est supprimable, nom de l'icône Material Icons pour l'icône de suppression à droite. Peut également être défini via `slot="delete-icon"`.
`href`	`href`	`string`	-
URL cible du lien. Si cette propriété est définie, le composant sera rendu comme un élément `<a>` et pourra utiliser les attributs liés aux liens.
`download`	`download`	`string`	-
Nom du fichier à télécharger. Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Cible d'ouverture du lien. Les valeurs possibles incluent : `_blank` : Ouvre le lien dans une nouvelle fenêtre `_parent` : Ouvre le lien dans le contexte parent `_self` : Par défaut. Ouvre le lien dans le contexte courant `_top` : Ouvre le lien dans toute la fenêtre Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relation entre le document actuel et le document lié. Les valeurs possibles incluent : `alternate` : Version alternative du document actuel `author` : Auteur du document actuel ou de l'article `bookmark` : Lien permanent vers la section ancêtre la plus proche `external` : Le document référencé n'est pas sur le même site que le document actuel `help` : Lien vers un document d'aide associé `license` : Le contenu principal du document actuel est couvert par la licence de droits d'auteur du fichier référencé `me` : Le document actuel représente le propriétaire du contenu lié `next` : Le document actuel fait partie d'une série, le document référencé est le suivant dans la série `nofollow` : L'auteur ou l'éditeur du document actuel n'approuve pas le fichier référencé `noreferrer` : N'inclut pas l'en-tête `Referer`. Effet similaire à `noopener` `opener` : Si l'hyperlien crée un contexte de navigation de premier niveau (c'est-à-dire que la valeur de l'attribut `target` est `_blank`), crée un contexte de navigation auxiliaire `prev` : Le document actuel fait partie d'une série, le document référencé est le précédent dans la série `search` : Fournit un lien vers une ressource pouvant être utilisée pour rechercher le fichier actuel et ses pages associées `tag` : Fournit une balise (identifiée par l'adresse donnée) applicable au document actuel Remarque : Disponible uniquement lorsque l'attribut `href` est spécifié.
`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
`disabled`	`disabled`	`boolean`	`false`
Si le composant est désactivé
`loading`	`loading`	`boolean`	`false`
Si le composant est en état de chargement
`name`	`name`	`string`	`''`
Nom du bouton, qui sera envoyé avec les données du formulaire. Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas défini.
`value`	`value`	`string`	`''`
Valeur initiale du bouton, qui sera envoyée avec les données du formulaire. Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas défini.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Type du bouton. Par défaut, il s'agit de `button`. Les valeurs possibles incluent : `submit` : Au clic sur le bouton, les données du formulaire sont envoyées au serveur `reset` : Au clic sur le bouton, tous les champs du formulaire sont réinitialisés à leurs valeurs initiales `button` : Ce type de bouton n'a pas de comportement par défaut Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas spécifié.
`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, y compris hors de l'élément `<form>`. Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas spécifié.
`formaction`	`formAction`	`string`	-
Spécifie l'URL de soumission du formulaire. Si cet attribut est spécifié, il remplace l'attribut `action` de l'élément `<form>`. Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas spécifié et que `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Spécifie le type de contenu à utiliser pour soumettre le formulaire au serveur. Les valeurs possibles incluent : `application/x-www-form-urlencoded` : Valeur par défaut si l'attribut n'est pas spécifié `multipart/form-data` : À utiliser lorsque le formulaire contient un élément `<input type="file">` `text/plain` : Nouveau dans HTML5, utilisé pour le débogage Si cet attribut est spécifié, il remplace l'attribut `enctype` de l'élément `<form>`. Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas spécifié et que `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Spécifie la méthode HTTP à utiliser pour soumettre le formulaire. Les valeurs possibles incluent : `post` : Les données du formulaire sont incluses dans le corps de la requête et envoyées au serveur `get` : Les données du formulaire sont ajoutées à l'URI du formulaire avec `?` comme séparateur, et l'URI résultante est envoyée au serveur. À utiliser lorsque le formulaire n'a pas d'effets secondaires et ne contient que des caractères ASCII Si cet attribut est défini, il remplace l'attribut `method` de l'élément `<form>`. Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas défini et que `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Quand il est activé, la validation du formulaire n'est pas effectuée lors de la soumission. Si cet attribut est défini, il remplace l'attribut `novalidate` de l'élément `<form>`. Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas défini et que `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Où afficher la réponse après l'envoi du formulaire. Les valeurs possibles incluent : `_self` : Option par défaut, ouvre dans le contexte courant `_blank` : Ouvre dans une nouvelle fenêtre `_parent` : Ouvre dans le contexte parent `_top` : Ouvre dans toute la fenêtre Si cet attribut est défini, il remplace l'attribut `target` de l'élément `<form>`. Remarque : Cette propriété ne s'applique que si l'attribut `href` n'est pas défini et que `type="submit"`.
	`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

Méthodes

Nom	Paramètres	Valeur de retour
`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
`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 message d'erreur personnalisé. Tant qu'il n'est pas vide, le champ est considéré comme invalide.

É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
`invalid`
Se déclenche lorsque la validation du champ du formulaire échoue
`change`
Se déclenche lorsque l'état de sélection change
`delete`
Se déclenche lors du clic sur l'icône de suppression

Slots

Nom
Défaut
Texte de la Chip
`icon`
Élément de gauche
`end-icon`
Élément de droite
`selected-icon`
Élément de gauche à l'état sélectionné
`delete-icon`
Élément de suppression à droite lorsqu'elle est supprimable

CSS Parts

Nom
`button`
Élément `<button>` ou `<a>` interne
`label`
Texte de la Chip
`icon`
Icône de gauche
`end-icon`
Icône de droite
`selected-icon`
Icône de gauche à l'état sélectionné
`delete-icon`
Icône de suppression à droite lorsqu'elle est supprimable
`loading`
Élément `<mdui-circular-progress>` en état de chargement

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis 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

Checkbox

Chapitre suivant

CircularProgress

Chip

Utilisation

Exemples

Variante

Surélevé

Icône

Lien

États désactivé et chargement

Sélectionnable

Supprimable

API

Propriétés

Méthodes

Événements

Slots

CSS Parts

Propriétés CSS personnalisées