Alertes
- Voir la page de documentation du composant sur le Système de Design de l’État Ouvre une nouvelle fenêtre
- Voir la page d’exemple du Système de Design de l’État Ouvre une nouvelle fenêtre
Documentation du tag
Returns an alert item. Takes a dict as parameter, with the following structure:
data_dict = {
"title": "(Optional if small) Title of the alert item",
"type": "Possible values : info, success, error",
"content": "(Optional if median) Content of the accordion item (can include html)",
"heading_tag": "(Optional) Heading tag for the alert title (default: p)",
"is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the alert (default: false)",
"id": "Unique id of the alert item (Optional, mandatory if collapsible)",
"extra_classes": "(Optional) string with names of extra classes."
}
All of the keys of the dict can be passed directly as named parameters of the tag.
Relevant extra_classes
:
fr-alert--sm
: small alert
On normal (median) alerts, the title is mandatory, the content is optional. On small alerts, the title is optional, the content is mandatory.
Tag name: dsfr_alert
Usage:
{% dsfr_alert data_dict %}
Exemples
Exemple 1
{'content': 'Cliquer sur la croix pour fermer l’alerte.', 'heading_tag': 'h3', 'id': 'alert-success-tag', 'is_collapsible': True, 'title': 'Alerte refermable de type succès', 'type': 'success'}
Alerte refermable de type succès
Cliquer sur la croix pour fermer l’alerte.
Exemple 2
{'content': 'Cliquer sur la croix pour fermer l’alerte.', 'heading_tag': 'h3', 'is_collapsible': True, 'title': 'Alerte refermable de type erreur', 'type': 'error'}
Alerte refermable de type erreur
Cliquer sur la croix pour fermer l’alerte.
Exemple 3
{'content': 'Cette alerte n’a pas de croix de fermeture.', 'heading_tag': 'h3', 'title': 'Alerte non-refermable de type info', 'type': 'info'}
Alerte non-refermable de type info
Cette alerte n’a pas de croix de fermeture.
Exemple 4
{'heading_tag': 'h3', 'title': 'Alerte medium sans contenu', 'type': 'warning'}
Alerte medium sans contenu
Exemple 5
{'content': 'Petite alerte sans titre.', 'extra_classes': 'fr-alert--sm', 'type': 'warning'}
Petite alerte sans titre.