Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Le groupe de boutons permet à l’utilisateur de faire un choix entre plusieurs actions.

Table of Contents
maxLevel2

Les boutons dans le contexte d'un groupe suivent les même règles que le composant bouton (blue star) :

...

Il est aussi possible d’appliquer le mode horizontal à partir d’un breakpoint définit point de rupture défini en ajoutant l'extension -sm, -md, ou -lg au modificateur fr-btns-group--inline , ainsi :

  • fr-btns-group--inline-sm applique le mode horizontal à partir du breakpoint point de rupture SM (576px)

  • fr-btns-group--inline-md applique le mode horizontal à partir du breakpoint point de rupture MD (768px)

  • fr-btns-group--inline-lg applique le mode horizontal à partir du breakpoint point de rupture LG (992px)

Code Block
languagehtml
<ul class="fr-btns-group fr-btns-group--inline-sm"> ...</ul>
<ul class="fr-btns-group fr-btns-group--inline-md"> ...</ul>
<ul class="fr-btns-group fr-btns-group--inline-lg"> ...</ul>

...

Dans un groupe de boutons, la gestion de la taille des boutons (sm, md, lg), SM, MD et LG se fait au niveau du groupe uniquement.
La taille MD est la taille par défaut (MD).
Les modificateurs fr-btns-group--sm , ou fr-btns-group--lg sur le groupe permettent d'appliquer les tailles SM et LG aux boutons.

...

Code Block
languagehtml
<!-- Groupes de boutons en taille small -->

<ul class="fr-btns-group fr-btns-group--sm">
    <li>
        <button class="fr-btn">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary">
            Label bouton
        </button>
    </li>
</ul>

<!-- Groupes de boutons en taille large -->

<ul class="fr-btns-group fr-btns-group--lg">
    <li>
        <button class="fr-btn">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary">
            Label bouton
        </button>
    </li>
</ul>

Pour les designers SKETCH

Les groupes de boutons verticaux sont constitués de boutons “fluides” disponibles par défaut à 588 px pour s’intégrer dans un prototype mobile. Ces symboles sont prévus pour s’adapter à la largeur des conteneurs de vos designs.

...

  • Dans chaque groupe de bouton veillez à utiliser

    • la même taille pour chaque bouton (SM, MD , LG)

    • La même structure typologie pour chaque bouton ( Icônes ou texte seul, avec icônes à gauche ou droite)

...