Composants de mise en page

Les composants de mise en page organisent la page. Ils définissent le squelette visuel — bandeaux, conteneurs centrés, pistes flex et grid, cartes, barres latérales, modales — et hébergent d'autres composants via children. Le positionnement s'exprime en classes Tailwind dans props.className ; ces composants apportent de la structure, pas des partis pris de style.

components:
  - type: hero
    content: Ship internal tools from config
    props: { className: 'bg-primary text-white py-24' }
  - type: container
    element: section
    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

Un 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.

Accepte content, children, props, interactions, responsive, visibility et i18n.

container

Un encadrant générique de niveau bloc — l'outil de base pour contraindre la largeur, appliquer du remplissage et regrouper des enfants. C'est aussi le seul composant de mise en page qui accepte un dataSource, ce qui en fait le moyen usuel de lier toute une région à un enregistrement.

flex

Un conteneur flexbox. Direction, espacement, alignement et retour à la ligne viennent tous de props.className — flex flex-col, gap-4, items-center, justify-between. Accepte children, props, responsive et visibility.

grid

Un conteneur CSS grid à pistes de colonnes fixes, également piloté par props.className : grid grid-cols-3, gap-6, auto-rows-fr. Les enfants se répartissent dans les cellules.

responsive-grid

Une grille dont la mise en page se déclare via le module responsive plutôt que par des classes préfixées. À préférer lorsque c'est le nombre de colonnes qui change d'un point de rupture à l'autre.

- type: responsive-grid
  props: { className: 'gap-6' }
  responsive:
    md: { props: { className: 'grid-cols-2 gap-6' } }
    lg: { props: { className: 'grid-cols-3 gap-8' } }
  children:
    - { type: card }

card

Une surface bordée et rembourrée pour regrouper du contenu — préstylée avec fond, bordure, rayon, ombre et remplissage. Un props.className que vous fournissez est ajouté en dernier : il l'emporte donc dans la cascade Tailwind et peut resserrer les valeurs par défaut. Accepte children, props, interactions, responsive et visibility.

sidebar

Un panneau de navigation vertical, généralement associé à une région principale container pour former une mise en page de type app-shell. Composez-le statiquement depuis children, ou liez ses entrées à une table via le bloc layout.sidebar de la page.

Accepte children, props, responsive et visibility.

modal

Une superposition de dialogue contenant le corps du panneau. Donnez-lui un identifiant via props.id, puis ouvrez-la depuis un déclencheur avec interactions.click.modal. Pour les superpositions de confirmation, utilisez plutôt dialog / alert-dialog.

- { type: button, content: Edit, interactions: { click: { modal: edit-panel } } }
- type: modal
  props: { id: edit-panel, className: 'max-w-lg' }
  children:
    - { type: text, element: h2, content: 'Edit task' }

split-pane

Deux régions redimensionnables séparées par un séparateur déplaçable. Les deux premiers children deviennent les panneaux.

tab-panel

Un panneau au sein d'un conteneur tabs. Son content est un objet structuré, pas une chaîne — le texte du déclencheur et celui du panneau sont deux champs distincts, afin que le moteur de rendu n'ait jamais à découper une chaîne en deux.

- type: tabs
  children:
    - { type: tab-panel, content: { label: Overview, body: 'The summary.' } }
    - type: tab-panel
      content: { label: Activity }
      children:
        - { type: data-table, dataSource: { table: events } }

Pages connexes

• Le modèle de composants — les modules partagés ci-dessus.
• Séparateurs et espaceurs — filets et rythme vertical.
• Composants de contenu — texte, code, icônes.
• Composants de superposition — dialogues, tiroirs, popovers.
• Design responsive — le module responsive.