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

Exemple 1 

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

Exemple 2 

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

Exemple 3 

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