` défini par la classe `fr-segmented__elements`. - Chaque segment est contenu dans un élément HTML `

` défini par la classe `fr-segmented__element`. - Chaque segment est un élément `` de type `radio` associé à un `` avec la classe `fr-label`. - Une description additionnelle, optionnelle, peut être ajoutée dans la légende, elle est définie par un élément `` et la classe utilitaire `fr-hint-text`. **Exemple de structure HTML simple** ```HTML

Légende Description additionnelle

Libellé

``` ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top multiline=true} | Dépendance | Obligatoire | Remarque | |------------|-------------|----------| | Core | Oui | | | Form | Oui | | | Segmented | Oui | | | Utility | Non | Uniquement pour l'ajout d'icône | ::: **Exemple d'imports CSS** ```HTML ``` #### Variante de taille Le contrôle segmenté est disponible en deux variantes de tailles pour s'adapter à différents contextes d'utilisation. Pour appliquer une variante de taille, ajoutez une des classes suivantes à l'élément `

` : - En taille MD : par défaut. - En taille SM : définie par la classe `fr-segmented--sm`. **Exemple de variante de taille** ```HTML

``` #### Variante avec légende en ligne Le contrôle segmenté par défaut est affiché en dessous de sa légende mais il est possible de les afficher sur une même ligne avec l'utilisation de la classe `fr-segmented__legend--inline` sur l'élément ``. **Exemple de contrôle segmenté avec légende en ligne** ```HTML

Légende

``` #### Variante sans légende visible La légende `` du contrôle segmenté est obligatoire mais peut être positionné hors écran avec l'utilisation de la classe `fr-segmented--no-legend` sur l'élément `

`. **Exemple de contrôle segmenté sans légende visible** ```HTML

``` #### Variante avec icônes Les libellés des segment du contrôle segmenté peuvent avoir une icône juxtaposée à gauche, elle est ajoutée via la **classe utilitaire d'icône** `fr-icon--NOM-ICONE` (voir [Icônes](../../../../../core/_part/doc/icon/index.md)). **Exemple de variante avec icônes** :::fr-accordion[Déplier pour voir le code]{id=code-segmented-icons} ```HTML

Légende

Libellé

``` ::: --- ### JavaScript Le composant Contrôle segmenté nécessite l'utilisation de JavaScript pour son fonctionnement de base, notamment pour gérer le passage à la ligne des éléments lorsque l'espace disponible est insuffisant. La classe `fr-segmented--vertical` est ainsi ajoutée par le JavaScript lorsqu'il est nécessaire de passer en mode vertical. #### Installation du JavaScript Chaque composant utilisant JavaScript possède un fichier JS spécifique et requiert le fichier JS du core. Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant ``) : ```HTML ``` NB: Il est aussi possible d'importer le Js global du DSFR `dsfr.module.min.js` Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé : ```HTML ``` Une fois le JavaScript chargé, le comportement fonctionne automatiquement. #### Instances Sur le contrôle segmenté, l'élément suivant est instancié : - Le composant "segmented", via la classe : `fr-segmented` - Chaque "segmentedElement" du composant, via le sélecteur : `fr-segmented__element input` Une fois chargé, le JS ajoute l'attribut `data-fr-js-segmented="true"` sur les éléments instanciés. #### API Il est possible d'interagir avec les instances du composant en JavaScript via une API. Cette API est disponible depuis la méthode `window.dsfr(instance)` du core. L'ensemble des propriétés et méthodes disponibles sont définies ci-après : ##### segmented :::fr-table[resize]{valign=top scroll=false} | | | |------|-----| | **Description** | Permet de mettre à jour le composant après un changement de libellé. | | **Type** | property | | **Retour** | DOMElement | | **Exemple** | `dsfr(segmented).segmented.resize()` | ::: :::fr-table[node]{valign=top scroll=false} | | | |------|-----| | **Description** | Renvoie le noeud HTML de l'élément. | | **Type** | property | | **Retour** | DOMElement | | **Exemple** | `dsfr(segmented).segmented.node` | ::: ##### segmentedElement :::fr-table[node]{valign=top scroll=false} | | | |------|-----| | **Description** | Renvoie le noeud HTML de l'élément. | | **Type** | property | | **Retour** | DOMElement | | **Exemple** | `dsfr(segmentedElement).segmentedElement.node` | ::: --- ### Note de version [Voir les évolutions sur github](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+segmented+)