Paramètres d’affichage (Display)

Utilisez les paramètres d’affichage pour proposer le choix du thème clair, sombre ou système.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:display

Usage

• Les pictogrammes DSFR doivent être servis avec les assets DSFR.
• Le composant s’appuie sur le JavaScript DSFR pour le comportement complet.

Modes d'utilisation

Exemple principal

Paramètres d’affichage · exemple principal

<twig:dsfr:display id="display-settings" />

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:display
  id="parametres-affichage-example"
  class="fr-mt-2w"
  data-controller="parametres-affichage"
/>

API publique

Composant	Rôle
dsfr:display	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
id	string	Selon composant	Identifiant HTML, normalisé et utilisé par aria-controls quand nécessaire.
modalId	string	fr-theme-modal	Identifiant de la modale.
modalTitle / buttonLabel / buttonTitle	string	Défauts DSFR	Textes de la modale et du bouton.
legend	string	Défaut DSFR	Légende du groupe radio.
name	string	fr-radios-theme	Nom des radios.
artworkBasePath	string	/dsfr/artwork/pictograms	Base des pictogrammes DSFR.
opened / bodyOnly	bool	false	Ouvre la modale ou rend uniquement le corps.

Guide d'intégration

Question	Réponse
Famille DSFR	Mise en page
Quand l'utiliser	Quand vous composez une page, une zone transverse ou un bloc structurel réutilisable.
Quand éviter	Pour corriger un espacement local : utilisez d’abord les props et classes utilitaires DSFR prévues.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:display.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Paramètres d’affichage : options, accessibilité et rendu DSFR

Variantes de paramètres d’affichage

• paramètres d’affichage avec attributs HTML pass-through pour id, class, data-* et aria-* quand le template le permet.

Points de contrôle propres à ce composant

• Les pictogrammes DSFR doivent être servis avec les assets DSFR.
• Le composant s’appuie sur le JavaScript DSFR pour le comportement complet.

Accessibilité mise en page

• Le composant ne remplace pas les landmarks de votre page : gardez main, nav, aside, section côté application.
• Les zones transverses doivent rester identifiables et cohérentes entre les pages.
• Vérifiez les ruptures responsive sur mobile, tablette et desktop.

Intégration Symfony/Twig pour dsfr:display

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:display quand ils concernent son nœud racine.
• Gardez des id prévisibles pour dsfr:display, surtout dans les listes ou formulaires répétés.

Checklist de recette

• rendu mobile sans débordement
• landmarks présents dans la page
• comportement thème clair/sombre si concerné
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Un panneau, menu ou état actif ne fonctionne pas	Vérifiez que le JavaScript DSFR est chargé et que les identifiants HTML sont uniques.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.