Le modèle de composants

Le tableau components d'une page est un arbre. Chaque entrée porte un type — parmi 96 types intégrés — et un ensemble de propriétés. Les composants n'inventent pas chacun leur vocabulaire : ils se composent d'un petit ensemble de modules partagés, de sorte que les mêmes propriétés transversales signifient la même chose partout où elles apparaissent.

components:
  - type: container
    props: { className: 'max-w-4xl mx-auto' }
    children:
      - { type: text, tag: h1, content: 'Tasks' }
      - type: data-table
        dataSource: { table: tasks }

Modules partagés

Module	Présent sur	Rôle
props	Tous les composants	Ensemble clé-valeur rendu en attributs HTML — className, variant et les clés propres au composant.
children	Tous les composants	Définitions de composants imbriqués, ou simples chaînes. Profondeur arbitraire.
content	Contenu et mise en page	Texte ou markdown inline, avec substitution de références.
dataSource	Composants liés aux données	Lie à une table ou à un point de terminaison système. Voir Liaison de données.
visibility	La plupart des composants	Affichage conditionnel selon l'état d'authentification.
responsive	La plupart des composants	Surcharges de propriétés par point de rupture.
interactions	Composants interactifs	Comportements au clic, au survol, au défilement et à l'entrée. Voir Interactions.
action	Composants formulaire et bouton	Ce que fait l'exécution du composant — crud, auth, navigate, automation.
i18n	Composants de contenu	Variantes de contenu par langue.

props et children sont universels. Les autres sont adoptés type par type : un divider porte props et children et rien d'autre, tandis qu'un hero ajoute content, interactions, responsive, visibility et i18n. Chaque page de référence précise ce que ses composants acceptent réellement.

Substitution de références

Les valeurs de content et de props résolvent quatre familles de références au moment du rendu :

$record.<field> (l'enregistrement lié), $vars.<key> (les variables de page), $currentUser.<path> (le contexte de session) et $t:<key> (les traductions). Une page rendue depuis markdown ajoute $frontmatter.*. Voir Liaison de données pour le détail de chaque famille.

Catégories

Les 96 types sont documentés par catégorie, chacune sur sa propre page.

Catégorie	Types
Mise en page	hero, container, flex, grid, responsive-grid, card, sidebar, modal, split-pane, tab-panel
Structure	divider, spacer
Contenu	text, code, icon, toc, pageSearch, searchInput
Média	image, video, audio, iframe, carousel, aspect-ratio
Affichage	accordion, command, empty-state, list-item, record-field, resizable, scroll-area, speech-bubble, static-table, tabs, timeline
Navigation	navigation-menu, dropdown-menu, context-menu, menubar, breadcrumb, pagination
Superpositions	dialog, alert-dialog, drawer, record-drawer, popover, hover-card, tooltip, toast
Retour d'information	progress, spinner, skeleton
Interactif	button, button-group, link, alert, badge, theme-toggle
Données	data-table, list, gallery, kanban, calendar, chart, kpi, data-timeline, data-form, form
Contrôles de formulaire	input, textarea, select, combobox, checkbox, radio-group, switch, toggle, toggle-group, field
Contrôles avancés	slider, date-picker, time-picker, number-input, file-upload, input-otp
Spécialité	wizard, reorderable-list, language-switcher, status-indicator
Social	comments, commentCount, ai-chat
Personnalisé	customHTML

Pages connexes

• Présentation des pages — où vit le tableau components.
• Liaison de données — le module dataSource.
• Interactions — les modules interactions et action.
• Design responsive — le module responsive.
• Thème — les jetons que consomme le style des composants.