Boutons – Groupe

Documentation du tag

Returns a group of button items. Takes a dict as parameter, with the following structure:

data_dict = {
    "items": "List of dicts (see the button tag for the structure of these dicts.)",
    "extra_classes": "(Optional) string with names of extra classes."
}

Relevant extra_classes:

  • fr-btns-group--inline-sm: Inline group, small size
  • fr-btns-group--inline-md: Inline group, normal size
  • fr-btns-group--inline-lg: Inline group, large size
  • fr-btns-group--sm: Vertical group, small size
  • fr-btns-group--lg: Vertical group, large size
  • fr-btns-group--equisized: Width adjusted in Javascript
  • fr-btns-group--icon-left: Buttons with an icon on the left side
  • fr-btns-group--icon-right: Buttons with an icon on the right side

Tag name: dsfr_button_group

Usage: {% dsfr_button_group data_dict %}

Exemples

Données 

{'extra_classes': 'fr-btns-group--icon-left',
 'items': [{'extra_classes': 'fr-icon-checkbox-circle-line fr-btn--icon-left',
            'label': 'Bouton principal',
            'onclick': "alert('Vous avez cliqué sur le bouton principal')"},
           {'extra_classes': 'fr-icon-checkbox-circle-line fr-btn--icon-left '
                             'fr-btn--secondary',
            'label': 'Bouton secondaire',
            'name': 'secundary-button',
            'onclick': "alert('Vous avez cliqué sur le bouton secondaire')",
            'type': 'button'}]}

Résultat

Données 

{'extra_classes': 'fr-btns-group--equisized',
 'items': [{'label': 'Bouton principal',
            'onclick': "alert('Vous avez cliqué sur le bouton principal')"},
           {'extra_classes': 'fr-btn--secondary',
            'label': 'Bouton secondaire',
            'name': 'secundary-button',
            'onclick': "alert('Vous avez cliqué sur le bouton secondaire')",
            'type': 'button'},
           {'extra_classes': 'fr-btn--tertiary',
            'label': 'Bouton tertiaire',
            'onclick': "alert('Vous avez cliqué sur le bouton tertiaire')"},
           {'extra_classes': 'fr-btn--tertiary-no-outline',
            'label': 'Bouton tertiaire sans bordure',
            'onclick': "alert('Vous avez cliqué sur le bouton tertiaire sans "
                       "bordure')",
            'type': 'button'}]}

Résultat

Données 

{'extra_classes': 'fr-btns-group--inline-sm',
 'items': [{'label': 'Bouton principal',
            'onclick': "alert('Vous avez cliqué sur le bouton principal')"},
           {'extra_classes': 'fr-btn--secondary',
            'label': 'Bouton secondaire',
            'name': 'secundary-button',
            'onclick': "alert('Vous avez cliqué sur le bouton secondaire')",
            'type': 'button'},
           {'extra_classes': 'fr-btn--tertiary',
            'label': 'Bouton tertiaire',
            'onclick': "alert('Vous avez cliqué sur le bouton tertiaire')"},
           {'extra_classes': 'fr-btn--tertiary-no-outline',
            'label': 'Bouton tertiaire sans bordure',
            'onclick': "alert('Vous avez cliqué sur le bouton tertiaire sans "
                       "bordure')",
            'type': 'button'}]}

Résultat