Documentation du composant Classeur #

Le composant Classeur est un élément réutilisable qui crée une section visuelle avec un onglet de type classeur physique. Ce composant a été conçu pour assurer une cohérence visuelle à travers le site tout en offrant une grande flexibilité dans le contenu présenté.

Utilisation de base #

Pour utiliser le composant Classeur, importez d'abord les macros dans votre fichier Nunjucks :

{% from "components/binder.njk" import binder, binderSection %}

Ensuite, vous pouvez appeler la macro binderSection avec les paramètres souhaités :

{{ binderSection(
  tabNumber="1",
  tabTitle="Vision",
  title="Notre vision pour l'avenir",
  content="<p>Contenu HTML ou Markdown ici...</p>",
  backgroundColor="green"
) }}

Paramètres disponibles #

Le composant Classeur accepte les paramètres suivants :

Paramètre	Type	Défaut	Description
tabNumber	String	""	Le numéro à afficher dans l'onglet (optionnel)
tabTitle	String	"Titre de l'onglet"	Le texte à afficher dans l'onglet du classeur
title	String	""	Le titre principal à l'intérieur du classeur
content	String	""	Le contenu HTML ou Markdown à afficher
backgroundColor	String	"green"	La couleur de fond (utilise les classes Tailwind, ex: "green", "lavender", "orange")
buttons	Array	[]	Un tableau d'objets bouton avec les propriétés : text, url, size, type, icon
image	String	""	URL de l'image à afficher
imagePosition	String	"right"	Position de l'image : "right", "left", "top", "bottom"
customClass	String	""	Classes CSS additionnelles pour personnaliser la section

Exemples d'utilisation #

Classeur simple avec texte #

{{ binderSection(
  tabNumber="1",
  tabTitle="À propos",
  title="Notre histoire",
  content="<p>Texte descriptif ici...</p>",
  backgroundColor="lavender"
) }}

Classeur avec image à droite #

{{ binderSection(
  tabNumber="2",
  tabTitle="Mission",
  title="Notre mission",
  content="<p>Description de notre mission...</p>",
  backgroundColor="green",
  image="/chemin/vers/image.jpg",
  imagePosition="right"
) }}

Classeur avec boutons d'action #

{{ binderSection(
  tabNumber="3",
  tabTitle="Rejoignez-nous",
  title="Participez à notre mission",
  content="<p>Texte d'invitation à participer...</p>",
  backgroundColor="orange",
  buttons=[
    { text: "S'inscrire", url: "/inscription", type: "solid" },
    { text: "En savoir plus", url: "/a-propos", type: "contour", icon: true }
  ]
) }}

Contenu personnalisé avancé #

Pour des cas d'utilisation plus complexes nécessitant une structure HTML personnalisée, vous pouvez utiliser la syntaxe de "call" :

{% call binderSection(
  tabNumber="4",
  tabTitle="Galerie",
  title="Nos réalisations",
  backgroundColor="green"
) %}
  <!-- Votre contenu HTML personnalisé ici -->
  <div class="grid grid-cols-3 gap-4">
    <img src="/image1.jpg" alt="Image 1">
    <img src="/image2.jpg" alt="Image 2">
    <img src="/image3.jpg" alt="Image 3">
  </div>
{% endcall %}

Différence entre binder et binderSection #

• binder : Crée uniquement le composant classeur lui-même, sans la section englobante.
• binderSection : Crée une section complète avec le composant classeur à l'intérieur, avec les marges et le positionnement appropriés.

Choisissez celui qui convient le mieux à votre contexte d'utilisation.

Bonnes pratiques #

1. Utilisez des couleurs cohérentes avec la charte graphique du site
2. Gardez le contenu concis et pertinent
3. Utilisez des images de qualité et optimisées pour le web
4. Assurez-vous que les liens des boutons fonctionnent correctement
5. Testez le rendu sur différentes tailles d'écran

---

Pour voir des exemples concrets du composant Classeur en action, consultez la page d'exemples.