Catalogue de composants
Choisir un composant par son rôle, ses propriétés et ses interactions.
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 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 précise son usage sans changer les Actions ou l’éditeur natif.
La référence des composants Surface 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.
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.
{
"recordProfileKey": "client",
"fieldPath": "fields/notes"
}Variante et raccordement
Propriétés du composant QueryTable.props. Propriétés et valeurs admises.
{
"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.
- Identité du client
- Notes et suivi
- Paramètres
- Soumissions liées
Le client souhaite préparer une proposition pour son nouveau projet. Préciser les besoins et confirmer le budget avant la revue.
Texte éditable dans la Surface