SegmentedButton

Le composant Bouton segmenté regroupe des boutons pour proposer des options, changer de vue, trier des éléments, etc.

Utilisation

Importez les composants :

import 'mdui/components/segmented-button-group.js';
import 'mdui/components/segmented-button.js';

Importez les types TypeScript correspondants :

import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';
import type { SegmentedButton } from 'mdui/components/segmented-button.js';

Exemple d'utilisation :

Jour

Semaine

Mois

<mdui-segmented-button-group>
  <mdui-segmented-button>Jour</mdui-segmented-button>
  <mdui-segmented-button>Semaine</mdui-segmented-button>
  <mdui-segmented-button>Mois</mdui-segmented-button>
</mdui-segmented-button-group>

Exemples

Pleine largeur

Ajoutez l'attribut full-width à <mdui-segmented-button-group> pour occuper toute la largeur.

Jour

Semaine

Mois

<mdui-segmented-button-group full-width>
  <mdui-segmented-button>Jour</mdui-segmented-button>
  <mdui-segmented-button>Semaine</mdui-segmented-button>
  <mdui-segmented-button>Mois</mdui-segmented-button>
</mdui-segmented-button-group>

Source

Sélection unique

Définissez selects="single" pour la sélection unique. La value du groupe correspond à la value du bouton sélectionné.

Jour

Semaine

Mois

Jour

Semaine

Mois

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Jour</mdui-segmented-button>
  <mdui-segmented-button value="week">Semaine</mdui-segmented-button>
  <mdui-segmented-button value="month">Mois</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Jour</mdui-segmented-button>
  <mdui-segmented-button value="week">Semaine</mdui-segmented-button>
  <mdui-segmented-button value="month">Mois</mdui-segmented-button>
</mdui-segmented-button-group>

Source

Sélection multiple

Définissez selects="multiple" pour la sélection multiple. La value du groupe est un tableau des value des boutons sélectionnés.

Remarque : En mode multiple, la value est un tableau et ne peut être lue/modifiée que via la propriété JavaScript.

Jour

Semaine

Mois

Jour

Semaine

Mois

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Jour</mdui-segmented-button>
  <mdui-segmented-button value="week">Semaine</mdui-segmented-button>
  <mdui-segmented-button value="month">Mois</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Jour</mdui-segmented-button>
  <mdui-segmented-button value="week">Semaine</mdui-segmented-button>
  <mdui-segmented-button value="month">Mois</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Présélectionner Semaine et Mois
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Source

Icône

Utilisez les attributs icon et end-icon sur <mdui-segmented-button> pour ajouter des icônes Material Icons. Utilisez les slots correspondants.

Jour

Semaine

Mois

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Jour</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Semaine</mdui-segmented-button>
  <mdui-segmented-button>
    Mois
    <mdui-icon slot="icon" name="downloading"></mdui-icon>
    <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
  </mdui-segmented-button>
</mdui-segmented-button-group>

Source

Utilisez l'attribut selected-icon ou le slot selected-icon pour définir l'icône de l'état sélectionné.

Jour

Semaine

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Jour</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Semaine
  </mdui-segmented-button>
</mdui-segmented-button-group>

Source

Lien

Ajoutez l'attribut href à <mdui-segmented-button> pour le transformer en lien. Les attributs liés aux liens (download, target, rel) sont disponibles.

Lien

Semaine

Mois

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Lien</mdui-segmented-button>
  <mdui-segmented-button>Semaine</mdui-segmented-button>
  <mdui-segmented-button>Mois</mdui-segmented-button>
</mdui-segmented-button-group>

Source

États désactivé et chargement

Ajoutez disabled à <mdui-segmented-button-group> pour désactiver tout le groupe.

Jour

Semaine

Mois

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Jour</mdui-segmented-button>
  <mdui-segmented-button>Semaine</mdui-segmented-button>
  <mdui-segmented-button>Mois</mdui-segmented-button>
</mdui-segmented-button-group>

Source

Ajoutez disabled à un bouton pour le désactiver, ou loading pour un état de chargement.

Jour

Semaine

Mois

Année

<mdui-segmented-button-group>
  <mdui-segmented-button>Jour</mdui-segmented-button>
  <mdui-segmented-button disabled>Semaine</mdui-segmented-button>
  <mdui-segmented-button loading>Mois</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Année</mdui-segmented-button>
</mdui-segmented-button-group>

Source

`mdui-segmented-button-group` API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`full-width`	`fullWidth`	`boolean`	`false`
Si le groupe doit remplir toute la largeur de l'élément parent
`selects`	`selects`	`'single' \| 'multiple'`	-
État de sélection des boutons segmentés. Par défaut, non sélectionnable. Les valeurs possibles incluent : `single` : Sélection unique `multiple` : Sélection multiple
`disabled`	`disabled`	`boolean`	`false`
Si le composant est désactivé
`required`	`required`	`boolean`	`false`
Si une sélection est requise 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 lors de la soumission du formulaire, qui sera envoyé avec les données du formulaire
`value`	`value`	`string \| string[]`	`''`
Valeur du ou des `<mdui-segmented-button>` actuellement sélectionné(s). Remarque : L'attribut HTML de cette propriété est toujours une chaîne de caractères, et ne peut être défini comme valeur initiale via l'attribut HTML que lorsque `selects="single"`. La valeur de la propriété JavaScript est une chaîne lorsque `selects="single"`, et un tableau de chaînes lorsque `selects="multiple"`. Par conséquent, lorsque `selects="multiple"`, vous ne pouvez modifier cette valeur qu'en modifiant la valeur de la propriété JavaScript.
	`defaultValue`	`string \| string[]`	`''`
Valeur sélectionnée par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
	`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
`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.

Événements

Nom
`change`
Se déclenche lorsque la valeur sélectionnée change
`invalid`
Se déclenche lorsque la validation du champ du formulaire échoue

Slots

Nom
Défaut
Composants `<mdui-segmented-button>`

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.

`mdui-segmented-button` API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons à gauche. Peut également être défini via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nom de l'icône Material Icons à droite. Peut également être défini via `slot="end-icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Nom de l'icône Material Icons pour l'état sélectionné. Peut également être défini via `slot="selected-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

Slots

Nom
Défaut
Contenu textuel du bouton segmenté
`icon`
Icône de gauche du bouton segmenté
`selected-icon`
Icône de gauche à l'état sélectionné
`end-icon`
Icône de droite du bouton segmenté

CSS Parts

Nom
`button`
Élément `<button>` ou `<a>` interne
`icon`
Icône de gauche
`selected-icon`
Icône de gauche à l'état sélectionné
`end-icon`
Icône de droite
`label`
Contenu textuel
`loading`
Élément `<mdui-circular-progress>` en état de chargement

Chapitre précédent

Select

Chapitre suivant

Slider