Tag

Documentation du tag

Returns a tag item. Takes a dict as parameter, with the following structure:

data_dict = {
    "label": "Label of the tag",
    "link": "(Optional) link of the tag",
    "onclick": "(Optional) action that happens when the tag is clicked on",
    "is_selectable": "(Optional) boolean that marks the tag as selectable",
    "is_dismissable": "(Optional) boolean that marks the tag as dismissable",
    "extra_classes: (Optional) string with names of extra classes"
}

Relevant extra_classes:

  • fr-tag--sm: for a small tag
  • icon classes: an icon for the tag, along with a positional class (eg, fr-icon-arrow-right-line fr-tag--icon-left)

All of the keys of the dict can be passed directly as named parameters of the tag.

Tag name: dsfr_highlight

Usage: {% dsfr_highlight data_dict %}

Exemples

Exemple 1 

{'label': 'Tag simple'}

Tag simple

Exemple 2 

{'label': 'Tag avec lien', 'link': '/django-dsfr/components'}
Tag avec lien

Exemple 3 

{'extra_classes': 'fr-tag--sm fr-icon-arrow-right-line fr-tag--icon-left',
 'label': 'Petit tag avec icône'}

Petit tag avec icône

Exemple 4 

{'extra_classes': 'fr-icon-cursor-line fr-tag--icon-right',
 'label': 'Tag avec action',
 'link': '#',
 'onclick': "alert('clicked'); return false;"}
Tag avec action

Exemple 5 

{'is_selectable': True, 'label': 'Tag sélectionnable'}

Exemple 6 

{'is_dismissable': True, 'label': 'Tag supprimable'}

Exemple 7 

{'extra_classes': 'fr-tag--green-emeraude', 'label': 'Tag vert', 'link': '#'}
Tag vert