Recettes développeur

Ces recettes couvrent les problèmes les plus fréquents rencontrés sur des applications Symfony DSFR.

Passer des tableaux Twig

<twig:dsfr:nav :items="[
  {label: 'Accueil', href: '/'},
  {label: 'Dossiers', href: '/dossiers', active: true}
]" />

Sans :, Twig transmet une chaîne. Utilisez : pour items, links, options, rows, headers, services et toutes les props structurées.

Composer sans include ni macro

<twig:dsfr:table id="users" caption="Utilisateurs">
  <twig:dsfr:table:head>
    <twig:dsfr:table:row>
      <twig:dsfr:table:head:cell>Nom</twig:dsfr:table:head:cell>
      <twig:dsfr:table:head:cell>Statut</twig:dsfr:table:head:cell>
    </twig:dsfr:table:row>
  </twig:dsfr:table:head>
  <twig:dsfr:table:body>
    {% for user in users %}
      <twig:dsfr:table:row>
        <twig:dsfr:table:cell>{{ user.name }}</twig:dsfr:table:cell>
        <twig:dsfr:table:cell>{{ user.status }}</twig:dsfr:table:cell>
      </twig:dsfr:table:row>
    {% endfor %}
  </twig:dsfr:table:body>
</twig:dsfr:table>

Brancher Stimulus ou votre JavaScript

<twig:dsfr:button
  label="Exporter"
  icon="fr-icon-download-line"
  data-controller="export"
  data-action="export#download"
/>

Les attributs applicatifs peuvent être passés sur le composant quand ils concernent son nœud racine.

Contrôler une surcouche DSFR

<twig:dsfr:button label="Supprimer" aria-controls="delete-modal" />
<twig:dsfr:modal id="delete-modal" title="Supprimer le dossier">
  <p>Cette action est définitive.</p>
</twig:dsfr:modal>

Le bouton porte aria-controls; la cible porte le même id. Le JavaScript DSFR se charge de l’ouverture.

Choisir Community ou Pro

Situation	Réponse
Vous construisez une base gratuite	utilisez les composants Community : bouton, lien, tag, badge, alerte, highlight, breadcrumb, pagination, stepper, skip links, grille
Vous avez besoin de composants applicatifs avancés	activez la licence Pro et utilisez le reste du catalogue
Un composant disparaît en production	validez la licence et le domaine courant

Avant livraison

• npm run build dans docs pour vérifier la documentation.
• make ci à la racine pour style, analyse statique, Rector, tests et audit.
• Profiler DSFR ouvert sur les pages clés.
• Tests clavier sur navigation, formulaires, modales et menus.