Skip to main content
View as Markdown

Composants de mise en page

Les composants de mise en page organisent la page. Ils définissent le squelette visuel — bandeaux pleine largeur, conteneurs centrés, pistes flex et grid, cartes, barres latérales et fenêtres modales — et hébergent d'autres composants en tant que children. Chaque composant de mise en page accepte l'ensemble partagé props (rendu comme attributs HTML tels que className), ainsi que les modules responsive, visibility et i18n. Les composants de type conteneur acceptent en plus children.

components:
  - type: hero
    content: Ship internal tools from config
    props: { className: 'bg-primary text-white py-24' }
  - type: container
    props: { className: 'max-w-4xl mx-auto px-6' }
    children:
      - type: grid
        props: { className: 'grid-cols-3 gap-6' }
        children:
          - { type: card, children: [{ type: text, content: 'Fast' }] }

hero

Une section de bandeau pleine largeur, généralement le premier bloc d'une page d'accueil. Rend content comme titre principal et accepte children pour les appels à l'action et le contenu de support.

Propriété Description
content Texte du titre principal (prend en charge la substitution $record.*, $vars.*, key).
children Composants imbriqués rendus à l'intérieur du hero (sous-titres, boutons, médias).
props Attributs HTML — généralement className pour l'arrière-plan, le rembourrage et l'alignement.
interactions Comportements de clic/survol/entrée (p. ex. une animation d'entrée au chargement).
responsive Surcharges par point de rupture.
visibility Affichage conditionnel basé sur l'état d'authentification.

container

Un encadreur générique de niveau bloc. Utilisez-le pour contraindre la largeur, appliquer du rembourrage et regrouper les enfants.

Propriété Description
element Élément HTML à rendre. Par défaut div (p. ex. section, main, article).
children Définitions de composants imbriqués.
content Contenu inline optionnel rendu lorsqu'aucun children n'est présent.
props Attributs HTML (p. ex. className).

flex

Un conteneur flexbox. Disposez les enfants en ligne ou en colonne avec espacement, alignement et retour à la ligne contrôlés via les classes Tailwind dans props.className.

Propriété Description
children Composants imbriqués disposés le long de l'axe flex.
props Attributs HTML — définissez className sur flex flex-row/flex-col, gap-*, items-*, justify-*.
responsive Surcharges de direction/alignement par point de rupture.

grid

Un conteneur CSS grid avec des pistes de colonnes fixes. Les enfants s'écoulent dans les cellules de la grille.

Propriété Description
children Composants imbriqués placés dans les cellules de la grille.
props Attributs HTML — définissez className sur grid grid-cols-*, gap-*, auto-rows-*.

responsiveGrid

Une grille dont le nombre de colonnes s'adapte par point de rupture. Préférez celle-ci à grid lorsque vous souhaitez des colonnes responsives déclaratives sans écrire à la main les classes de point de rupture.

Propriété Description
children Composants imbriqués placés dans la grille responsive.
responsive Nombre de colonnes par point de rupture (mobile, sm, md, lg, xl).
props Attributs HTML (p. ex. gap-*).

card

Une surface bordée et rembourrée pour regrouper du contenu connexe. Couramment utilisée dans les grilles et les galeries.

Propriété Description
children Composants imbriqués rendus à l'intérieur du corps de la carte.
content Contenu inline optionnel lorsqu'aucun children n'est fourni.
props Attributs HTML — className pour l'élévation, le rayon et le rembourrage.
interactions Effets de clic/survol (p. ex. élévation au survol, navigation au clic).

Un panneau de navigation vertical, généralement associé à une région principale container pour former une mise en page de type app-shell. Peut être composée statiquement à partir de children ou liée à des données via la config layout.sidebar de la page (voir Présentation des pages → Mises en page et barres latérales).

Propriété Description
children Éléments et sections de navigation rendus comme menu vertical.
props Attributs HTML — className pour la largeur et le positionnement (panneau à largeur fixe).
visibility Affichage conditionnel (p. ex. masquer pour les utilisateurs non authentifiés).

Une superposition de dialogue ouverte par un déclencheur d'interaction. Le composant de mise en page modal contient le corps du dialogue ; ouvrez-le via interactions.onClick d'un bouton avec modalId. (Pour les superpositions de type confirmation, voir dialog/alert-dialog.)

Propriété Description
id Identifiant ciblé par un déclencheur d'ouverture (onClick.modalId).
children Composants imbriqués rendus à l'intérieur du panneau modal.
props Attributs HTML (p. ex. className pour le dimensionnement du panneau).

Cliquer sur l'arrière-plan ou appuyer sur Échap ferme la fenêtre modale ; le focus est piégé dans la fenêtre modale tant qu'elle est ouverte.

tab-panel

Un panneau unique au sein d'un conteneur tabs. Chaque panneau a un libellé de déclencheur et son propre contenu/enfants. Voir tabs pour le conteneur.

Propriété Description
label Texte affiché sur le bouton déclencheur de l'onglet.
content Contenu textuel inline du panneau (omettre lorsque le panneau rend des children).
children Composants imbriqués rendus à l'intérieur du panneau.

divider

Un trait horizontal séparant des sections de contenu.

Propriété Description
props.style Style de ligne : solid, dashed, ou dotted.
props.label Texte centré rendu dans la ligne du séparateur.
props Attributs HTML supplémentaires (p. ex. className).

spacer

Espace blanc vertical entre les blocs.

Propriété Description
props.size Préréglage d'espacement : sm, md, lg, ou xl.
props Attributs HTML supplémentaires (p. ex. className). 
components:
  - { type: text, tag: h2, content: 'Section A' }
  - { type: spacer, props: { size: lg } }
  - { type: divider, props: { style: dashed, label: 'or' } }
  - { type: text, tag: h2, content: 'Section B' }

Pages connexes