---
title: "Catalogue de composants"
url: https://developers.dagio.ai/fr/components/
---

# Catalogue de composants

   
                                
                                                                                     
                  
                
          
   

## Un catalogue commun

Le catalogue décrit les composants disponibles et leur schéma de propriétés. L’usager, le Studio et l’AI s’appuient sur les mêmes définitions. Un widget peut être riche sans introduire son propre stockage ou ses propres droits.

| Famille      | Composants / valeurs attendues        | Usage                                |
| ------------ | ------------------------------------- | ------------------------------------ |
| Organisation | Conteneurs, sections, piles et cartes | Composer une hiérarchie lisible      |
| Identité     | Titre, texte, badge, avatar, icône    | Reconnaître un objet et son état     |
| Fields       | Contrôles typés, choix et références  | Lire et modifier une valeur déclarée |
| Collections  | Tableau, liste et cartes              | Explorer le résultat d’une Query     |
| Relations    | Sélecteur et groupes de liens         | Relier et ouvrir des objets          |
| Contenus     | Document, Code, Canvas et Asset       | Utiliser l’éditeur natif             |
| Travail      | Actions, étapes et résultats          | Avancer et suivre un Flow            |

## Examiner une fiche de composant

Avant d’utiliser un composant, vérifiez les propriétés requises, les valeurs possibles, les enfants acceptés et les événements exposés. Le composant de données doit aussi indiquer son binding ou sa source. Un titre visuel n’est pas une identité métier; un bouton de confirmation doit référencer une Action.

`RecordLayout` dispose deux enfants `Stack` explicitement déclarés : contenu principal, puis informations complémentaires. Son preset obligatoire `asideWidth` choisit un panneau droit standard ou compact; les régions s’empilent sur petit écran. Il n’ajoute pas de Card autour de chaque région. Le guide [Composer la fiche](https://developers.dagio.ai/fr/composition/#disposer-le-contenu-principal-et-les-informations-liées) précise ces règles.

Vérifiez la famille exacte de catalogue retenue par le Model, pas une version de package logiciel. La référence liste les familles qui admettent chaque composant; un catalogue plus récent ne change pas silencieusement un Model existant ou ses données.

## La référence Surface

`Header` dispose l’identité de page et ses Actions dans exactement deux enfants `Stack` déclarés, dans cet ordre. Il n’a ni propriétés ni événements et ne crée aucune Card autour des régions. La région d’Actions conserve sa pile même lorsqu’elle est vide. Cette disposition appartient à la famille de catalogue `0.5.15`; sa présence dans la référence ne l’ajoute ni à la famille courante par défaut, ni à un ancien Model. Le [guide de composition](https://developers.dagio.ai/fr/composition/#disposer-lidentité-de-page-et-ses-actions) précise son usage sans changer les Actions ou l’éditeur natif.

La [référence des composants Surface](https://developers.dagio.ai/fr/surface-components/) détaille les primitives et widgets métier : Fields, paramètres, relations, contenus natifs, vues de Query et Actions. Elle expose leurs propriétés et événements depuis le catalogue Surface.

Choisissez le composant selon l’information à présenter : `RecordField` pour un Field éditable, `RecordSettings` pour les paramètres de la fiche, `QueryTable` pour une collection et `ModelAction` pour une commande. Chaque entrée de la référence précise ses propriétés, les valeurs attendues et les événements disponibles.

## Exemple

Dans une fiche Client, une carte présente l’identité, une section contient Notes, un contrôle propose État et un groupe de liens affiche les soumissions. La composition rapproche ces usages; elle ne transforme pas les soumissions en Fields texte du client.

## Onglets et groupes d'Actions

`Tabs` et ses `TabPanel` organisent les sections d'une fiche sans fermer son éditeur ni perdre une
saisie lorsqu'un panneau est masqué. Le Model choisit les clés, libellés, ordre et onglet initial.
Chaque panneau conserve ses composants; un seul éditeur natif est partagé par la composition.

`ActionGroup` présente au plus une Action principale, des Actions secondaires et un menu. Chaque
entrée nomme une Action déclarée et conserve sa préparation, ses permissions et sa confirmation.
Ces composants appartiennent à une famille de catalogue explicite; une application existante ne
les reçoit pas par changement silencieux de version.

<!-- surface-examples:start -->

## Exemples appliqués : Choisir le composant selon son rôle

Le Field édite Notes; le tableau présente les soumissions issues d’un groupe de relations.

### Configuration

Propriétés du composant `RecordField.props`. [Propriétés et valeurs admises](https://developers.dagio.ai/fr/surface-components/#recordfield).

```json
{
  "recordProfileKey": "client",
  "fieldPath": "fields/notes"
}
```

### Variante et raccordement

Propriétés du composant `QueryTable.props`. [Propriétés et valeurs admises](https://developers.dagio.ai/fr/surface-components/#querytable).

```json
{
  "binding": {
    "kind": "record-relations",
    "recordProfileKey": "client",
    "groupKey": "quotes"
  }
}
```

### Exemple de disposition UI

La disposition illustrative ci-dessous situe cette configuration dans l’app Clients/Soumissions. Chaque fragment s’insère à l’emplacement indiqué; ses références aux Fields, Queries et Actions correspondent aux déclarations du Model.

1. Identité du client
2. Notes et suivi
3. Paramètres
4. Soumissions liées

<!-- surface-examples:end -->