Composant Tab

Tab organise des contenus parallèles liés au même objet métier ou au même workflow. L'utilisateur passe d'une zone à l'autre sans quitter la page. Il convient à la gestion de fiches, aux configurations par étapes, au regroupement de détails et aux espaces « modification–validation ».

Après ce guide, vous saurez :

• ajouter un conteneur Tab et plusieurs onglets ;
• configurer les apparences Line, Card et Editable Card ;
• placer les onglets en haut, à droite, en bas ou à gauche ;
• configurer le centrage, la désactivation et le premier rendu différé ;
• combiner Forms, champs, boutons et autres conteneurs ;
• configurer onClick sur un onglet ou sur le conteneur Tab.

Réservez Tab aux vues parallèles d'un même objet. Pour des modules distincts ou des pages ayant leur propre URL, leurs permissions ou leur surbrillance de menu, utilisez le menu de pages. Une longue série d'onglets ne doit pas remplacer la navigation de l'application.

1. Exemple : espace de lancement de campagne

La page Tab de Spark Sample utilise un espace de lancement de campagne :

Onglet	Contenu	Point illustré
Overview	Nom, responsable, date, budget et résumé	Formulaire standard et brouillon
Delivery settings	Canal, audience, approbation, langue et consignes	Select, Switch et validation
Review & publish	Synthèse en lecture seule et publication	Rendu différé, état partagé et interactions
Audit log (coming soon)	Pas encore disponible	Onglet désactivé

L'exemple ne dépend pas d'une API Sample backend. Les valeurs restent dans l'état de la page courante. Pour charger des données métier, ajoutez Data Form, DataList, ProTable ou un autre composant de données dans un onglet.

2. Ajouter un conteneur Tab

1. Ouvrez la page cible dans Page Designer.
2. Dépliez Containers dans le panneau de gauche.
3. Faites glisser Tab dans Screen ou une zone acceptant les conteneurs.
4. Sélectionnez le conteneur et ajoutez des onglets dans la zone enfant Tabs.
5. Sélectionnez chaque Tab enfant et renseignez Tab Label.
6. Déposez Form, champs, boutons ou autres conteneurs dans l'onglet correspondant.

Tab
├── Overview
│   └── Form
├── Delivery settings
│   └── Form
├── Review & publish
│   └── Form
└── Audit log (coming soon)

3. Configurer le conteneur Tab

Propriété	Valeurs	Description
Tab Style	line, card, editable-card	Line souligne l'onglet actif ; Card emploie des cartes ; Editable Card reprend uniquement cette apparence
Tab Position	top, right, bottom, left	Position des libellés par rapport au contenu
Center Tabs	Activé / Désactivé	Centre les libellés en haut ou en bas ; les positions latérales restent verticales

À l'exécution, editable-card ne permet pas à l'utilisateur d'ajouter ou de supprimer la structure. Le nombre et l'ordre des onglets restent gérés dans Page Designer.

Le canevas prévisualise immédiatement la direction et l'apparence choisies. Enregistrez la page pour appliquer cette configuration à l'exécution.

4. Configurer un onglet

Propriété	Description
Tab Label	Libellé affiché ; restez bref et explicite
Always Render	Activé : rendu au chargement initial ; désactivé : rendu lors de la première ouverture
Disabled	Empêche la sélection, par exemple pour un contenu à venir ou indisponible

4.1 Choisir Always Render

• Activez-le pour un formulaire léger ou un partage d'état immédiat.
• Désactivez-le pour les graphiques, listes distantes ou composants lourds.
• Seul le premier rendu est différé ; revenir sur l'onglet n'efface pas automatiquement les valeurs saisies.

4.2 Choisir Disabled

Un onglet désactivé conserve son libellé, mais ne change pas le contenu et n'exécute pas son onClick. Supprimez ou masquez une structure qui ne doit jamais être accessible ; utilisez Disabled pour une indisponibilité temporaire.

5. Organiser le contenu

1. Donnez un sujet clair à chaque onglet.
2. Pour un formulaire, ajoutez d'abord Form puis ses champs afin d'unifier colonnes, proportions des libellés, disposition et validation.
3. Placez l'action principale dans le dernier onglet de validation ou dans une zone fixe.
4. Désactivez Always Render pour les listes lourdes.
5. Au-delà de cinq à sept onglets, revoyez l'architecture et déplacez le contenu secondaire vers des groupes, drawers ou pages séparées.

Dans l'exemple, Overview et Delivery settings utilisent des Forms modifiables, tandis que Review & publish utilise les mêmes noms de champs en lecture seule. Il affiche donc les dernières valeurs de la page.

6. Configurer les interactions

Tab prend en charge deux niveaux : onClick sur un Tab enfant et onClick sur le conteneur extérieur.

1. Sélectionnez le Tab cible sur le canevas ou dans la liste des enfants.
2. Ouvrez Interaction à droite.
3. Sous onClick, ajoutez un Toast, modifiez le contexte de page, appelez une API ou ajoutez une autre action.
4. Enregistrez puis vérifiez à l'exécution.

Lorsqu'un onglet disponible est sélectionné, le système exécute d'abord son onClick, puis celui du conteneur. Un onglet Disabled ne déclenche rien. Dans l'exemple, Review & publish affiche un message et son bouton possède un message de publication distinct.

7. Reproduire l'exemple

1. Ajoutez Tab avec line, top et sans centrage.
2. Ajoutez Overview, Delivery settings, Review & publish et Audit log (coming soon).
3. Placez une Form Horizontal à deux colonnes dans chacun des trois premiers onglets.
4. Ajoutez Input, DatePicker, TextArea et Save draft dans Overview.
5. Ajoutez Dropdown Select, Switch, Input, TextArea et Validate settings dans Delivery settings.
6. Ajoutez des champs en lecture seule et Publish campaign dans Review & publish, puis désactivez Always Render.
7. Définissez Audit log (coming soon) sur Disabled et désactivez Always Render.
8. Ajoutez un Info Toast au onClick de Review & publish.
9. Ajoutez un Toast aux trois boutons avec, par exemple :

Campaign [[campaignName]] is ready for [[campaignChannel]].

8. Résolution des problèmes

8.1 Les changements de style ou de position n'apparaissent pas à l'exécution

Vérifiez que la page est enregistrée et que l'URL utilise le versionId de la version courante. Le canevas prévisualise immédiatement, tandis que l'exécution lit le Page JSON enregistré.

8.2 Cliquer sur l'onglet ne déclenche rien

• Interaction doit être configurée sur le véritable Tab enfant, pas sur une Form interne.
• L'événement doit être onClick.
• Le Tab ne doit pas être Disabled.
• La page doit être enregistrée et l'exécution doit utiliser la version courante.

8.3 Les valeurs disparaissent après un changement d'onglet

Chaque champ doit avoir un Name stable et unique. Pour partager une valeur, les zones modifiable et en lecture seule doivent employer le même Name ; des Names différents représentent des états indépendants.

8.4 Le chargement initial est lent

Désactivez Always Render pour les onglets non initiaux contenant des listes distantes, graphiques ou de nombreux champs. Gardez l'essentiel dans le premier onglet.

9. Recommandations

• Utilisez des noms ou de courtes expressions d'action : Overview, Configuration, History.
• Conservez un niveau d'information homogène ; ne mélangez pas Details, System settings et Sign out.
• N'exprimez pas une erreur importante, un état non enregistré ou un résultat de publication uniquement par une couleur ; ajoutez un texte lisible.
• Sur mobile, réduisez le nombre d'onglets. Les positions latérales conviennent mieux aux zones de travail desktop.
• Utilisez des pages et menus séparés pour un lien indépendant, l'historique du navigateur ou des permissions de menu.