Tabs

Tabs divise une section d’écran en panneaux de contenu commutables — l’utilisateur appuie sur un en-tête d’onglet et le panneau en dessous se met à jour en conséquence.

Tabs element selected on the canvas with the +Add tab control visible

Ajouter, supprimer et sélectionner des onglets

Chaque onglet est composé de deux parties

  • En-tête d’onglet — le libellé cliquable (Tab 1, Tab 2, etc.).
  • Contenu de l’onglet — un conteneur par onglet. Tout ce que vous placez dans un conteneur de contenu s’affiche lorsque son onglet est sélectionné.

Cliquez sur Add tab pour ajouter un nouvel onglet. Chaque nouvel onglet obtient un conteneur de contenu correspondant.

Pour qu’un onglet spécifique soit actif à l’affichage initial de l’écran, activez Selected by default.

Styliser les onglets

Templates

Tab templates

Le Flow Builder propose trois templates d’onglets prêts à l’emploi :

  • Segment control — un sélecteur en forme de pilule avec des coins arrondis autour de l’onglet sélectionné.
  • Button Tabs — onglets distincts avec un style de bouton.
  • Underline — libellés textuels avec un soulignement indiquant l’onglet sélectionné.

États des onglets

Chaque onglet individuel dispose d’un sélecteur d’état (Default / Selected) pour styliser séparément les états actif et inactif — typographie, couleurs, remplissage et bordure par état.

Groupe sélectionnable

Les onglets forment un groupe sélectionnable à choix unique — exactement un onglet est actif à la fois. Gérez le groupe depuis le panneau Screen settings, dans la section Selectable groups.

Le groupe expose deux variables :

  • tabs.selectedOptionId — l’ID de l’onglet sélectionné. Utilisez-la dans les conditions.
  • tabs.selectedOptionTitle — le libellé de l’onglet sélectionné. Utilisez-la dans le texte dynamique.

Remplacez tabs par votre Group ID personnalisé si vous avez renommé le groupe.

Consultez Éléments et groupes sélectionnables pour une vue d’ensemble complète.