[(#REM) Groupe de boutons - Buttons group @author Jonathan OCHEJ @license MIT - https://github.com/GouvernementFR/dsfr/blob/main/LICENSE.md @see https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/groupe-de-boutons @param id - optionnel Identifiant unique utilisé pour l'attribut HTML `id` du composant. @param class - optionnel Ajoute les classes spécifiées à l'attribut HTML `class` du composant. @param boutons - obligatoire Liste des boutons #LISTE ou #ARRAY @param disposition (horizontale|horizontale_a_partir_du_point_de_rupture_petite_largeur|horizontale_a_partir_du_point_de_rupture_moyenne_largeur|horizontale_a_partir_du_point_de_rupture_grande_largeur) Par défaut la disposition du groupe de boutons est `verticale`. Il est aussi possible d'appliquer la disposition horizontale à partir d'un point de rupture : - `horizontale_a_partir_du_point_de_rupture_petite_largeur` (verticale sur un écran de petite largeur sinon horizontale) - `horizontale_a_partir_du_point_de_rupture_moyenne_largeur` (verticale sur un écran de petite et moyenne largeur sinon horizontale) - `horizontale_a_partir_du_point_de_rupture_grande_largeur` (horizontale uniquement sur un écran de grande largeur) @param taille_des_boutons (petite|moyenne|grande) Dans un groupe de boutons, la gestion de la taille des boutons se fait au niveau du groupe uniquement. La taille `moyenne` est la taille par défaut. @param largeur_des_boutons_identique (oui|non) Mettre automatiquement tous les boutons d'un groupe à la même largeur, en se basant sur le bouton le plus large. Cela permet une uniformité des boutons avec une disposition horizontale comme verticale. Avec une disposition verticale et en mobile, cela permet d'éviter que les boutons prennent 100% de la largeur du conteneur. @param alignement_des_boutons (a_gauche|au_centre|a_droite|a_droite_et_inverse) Par défaut le groupe de boutons avec une disposition horizontale est ferré à gauche du conteneur. Il est possible de le centrer ou de le ferrer à droite. Uniquement avec une disposition horizontale, en cas d'alignement a droite, vous pouvez inverser l'ordre des boutons. Avec une disposition verticale, l'alignement des boutons s'appliquera uniquement si ils ont une largeur identique `largeur_des_boutons_identique=oui`. @param affichage_des_icones (seule|a_droite|a_gauche) Dans un groupe de boutons, la gestion de l'affichage des icônes se fait au niveau du groupe uniquement. Affichage des icônes `a_gauche` par défaut. ] [(#ENV{boutons}|oui) #SET{class,#ARRAY} #SET{attributs,#ARRAY} #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group}} #SET{attributs,#GET{attributs}|dsfr_attribut_definir{id,#ENV**{id}|dsfr_id}} [(#ENV{disposition}|=={horizontale}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--inline}}] [(#ENV{disposition}|=={horizontale_a_partir_du_point_de_rupture_petite_largeur}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--inline-sm}}] [(#ENV{disposition}|=={horizontale_a_partir_du_point_de_rupture_moyenne_largeur}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--inline-md}}] [(#ENV{disposition}|=={horizontale_a_partir_du_point_de_rupture_grande_largeur}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--inline-lg}}] [(#ENV{taille_des_boutons}|=={petite}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--sm}}] [(#ENV{taille_des_boutons}|=={grande}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--lg}}] [(#ENV{largeur_des_boutons_identique}|=={oui}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--equisized}}] [(#ENV{alignement_des_boutons}|=={au_centre}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--center}}] [(#ENV{alignement_des_boutons}|=={a_droite}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--right}}] [(#ENV{alignement_des_boutons}|=={a_droite_et_inverse}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--right fr-btns-group--inline-reverse}}] #SET{affichage_des_icones,left} [(#ENV{affichage_des_icones}|=={a_gauche}|oui) #SET{affichage_des_icones,left}] [(#ENV{affichage_des_icones}|=={a_droite}|oui) #SET{affichage_des_icones,right}] [(#ENV{affichage_des_icones}|=={seule}|oui) #SET{affichage_des_icones,''}] [(#GET{affichage_des_icones}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-btns-group--icon-#GET{affichage_des_icones}}}]
  • #VALEUR
  • ] #FILTRE{trim}