Options communes

Les composants partagent deux options communes :

Ces paramètres fonctionnent de la même manière pour tous les composants et slots.

Alerte avec des classes CSS spécifiques

Tous les composants, slots et helpers ont des classes CSS par défaut permettant de les faire fonctionner avec le DSFR. Il est possible d’ajouter des classes CSS supplémentaires en utilisant le keyword argument classes. Les classes CSS par défaut seront combinées aux classes passées en paramètre.

Les classes CSS peuvent être passées sous forme de tableau ou en chaîne de caractères séparée par des espaces.

Code

= dsfr_alert(type: :success, size: :sm, classes: "some-custom-class") do
  Texte alertant avec des classes

Résultat

Texte alertant avec des classes 

<div class="fr-alert fr-alert--success fr-alert--sm some-custom-class">
  <p>
    Texte alertant avec des classes
  </p>
</div>

Alerte avec des attributs HTML spécifiques

Le fonctionnement est similaire avec le paramètre html_attributes à la différence que cet argument doit être passé sous forme d’un Hash.

Vous pouvez utiliser la convention Rails d’imbriquer les attributs aria et data.

Code

= dsfr_alert(type: :success, size: :sm,
  html_attributes: { lang: "fr-FR", data: { demo: true }, aria: { role: 'note' } }) do
  Texte alertant avec des attributs HTML

Résultat

Texte alertant avec des attributs HTML 

<div class="fr-alert fr-alert--success fr-alert--sm" lang="fr-FR" data-demo="true" aria-role="note">
  <p>
    Texte alertant avec des attributs HTML
  </p>
</div>