Les onglets sont largement utilisés sur le web. C'est un moyen utile et pratique de construire un système de navigation pour votre app.
Dans ce tutorial, nous allons apprendre comment créer ce type d'onglets pour votre app Bubble :
Étape 1 - Construire votre UI d'Onglets Bubble
Construire des onglets dans Bubble est assez simple, mais il y a une petite astuce que vous devez connaître.
Pour rendre vos Onglets responsive, vous devez vous assurer qu'ils deviennent horizontalement scrollables quand nécessaire.
De cette façon, vous vous assurez que les Utilisateurs pourront toujours les utiliser sur Mobile.
La meilleure façon de faire cela est d'utiliser un Repeating Group pour construire notre UI d'Onglets.
Non seulement cela rendra nos onglets responsive, mais cela les rendra aussi beaucoup plus faciles à maintenir, puisque vous n'aurez besoin de modifier que l'Onglet principal, et tous les changements seront appliqués aux autres Onglets.
Alors commençons :
Commençons par ajouter un Repeating Group à notre Page, et donnons-lui les paramètres suivants :
Comme vous pouvez le voir ci-dessus, j'ai décoché la checkbox "Fit width to content". C'est important pour s'assurer que le Repeating Group deviendra horizontalement scrollable plus tard.
Si vous voulez en apprendre plus sur comment obtenir un Horizontal Scroll dans Bubble, nous avons fait un tutorial là-dessus --> Cliquez ici pour le lire
Maintenant que le Repeating Group est configuré, nous pouvons commencer à créer notre Onglet Principal. C'est notre "Template" d'Onglet en quelque sorte.
Alors commençons par ajouter un Group dans notre RG ainsi qu'un élément Text pour notre Label.
Dans cet exemple, je vais faire ce type d'Onglets :
Vous pouvez le styler comme vous voulez. Dans cet article, nous nous concentrerons plus sur le faire fonctionner !
Très bien, maintenant que nous avons notre Onglet Principal, nous devons ajouter une Data Source à notre Repeating Group.
Ici vous avez deux approches principales :
1 - Utiliser des Dynamic Data
Cette méthode est bonne si vous voulez utiliser quelque chose qui est stocké dans votre Database ou comme un Option Set.
Par exemple, si vous construisez un Task manager, vous pourriez vouloir utiliser ces Onglets pour filtrer les tâches par leur Status (ex : Pending, Completed, Late etc...)
Dans ce cas, vous voudrez utiliser des dynamic data, comme suit :
A - Ajoutez votre content type et votre Data source au RG (peut être un Option Set ou un Data Type)
B - Définissez le Content type et la Data Source sur le Group de votre Onglet
C - Définissez votre élément text pour afficher le Label
Et voilà. Vous devriez maintenant voir vos Labels s'afficher correctement !
Vous pouvez passer à l'Étape 2.
2 - Utiliser des Static Data
Dans d'autres cas, vous pourriez vouloir utiliser des Static Data (c'est-à-dire du texte).
Cela peut être utile pour éviter de créer un nouvel option set ou de nouveaux data types par exemple.
Pour faire cela, vous pouvez utiliser l'opérateur "arbitrary text" en combinaison avec l'opérateur "split by".
L'opérateur "split by" convertira un texte unique en une liste de textes, basée sur un séparateur spécifié.
Voici comment faire :
A - Définissez la Data Source et le Content Type de votre Repeating Group
Maintenant comme dit précédemment, vous devrez utiliser un arbitrary text combiné avec un opérateur "split by", comme ci-dessous :
B - Définissez le content type et la Data source de votre Onglet
C - Affichez votre Onglet dans l'élément Text
Et voilà, le Repeating Group a maintenant le bon contenu.
Passons à l'Étape 2
Étape 2 - Construire les workflows de vos Onglets
Très bien, maintenant que nous avons tout configuré, nous pouvons passer à la construction de la logique qui donnera vie à nos Onglets !
2A - Créer un custom state
Pour faire cela, nous devrons d'abord créer un Custom State qui stockera l'Onglet Actif.
Vous pouvez l'attacher où vous voulez, mais dans mon cas j'aime l'ajouter sur le Repeating Group. Cela rend plus facile de le dupliquer si vous voulez le réutiliser.
IMPORTANT : Assurez-vous que le type de votre Custom State soit le même que celui de votre Repeating Group.
Aussi, assurez-vous de définir une Default Value si vous voulez avoir un Onglet sélectionné par défaut.
2B - Créer nos workflows
Maintenant que nous avons notre Custom state prêt, nous devons effectivement le mettre à jour quand un Onglet est cliqué.
Pour faire cela, ajoutez simplement un workflow au group de notre Onglet.
Ce workflow utilisera l'action "Set state of an element" :
Et voilà ! Rien de difficile.
Étape 3 - Faire réagir nos Onglets
Maintenant que notre Custom state est mis à jour correctement, nous devons effectivement refléter ces changements, c'est-à-dire faire en sorte que l'Onglet ait un "active state".
Pour faire cela, nous pouvons ajouter quelques conditions à notre Group d'Onglet et à son label.
Le nombre de propriétés de vos conditionnels dépendra du design que vous voulez, mais les conditions seront les mêmes que ci-dessous.
Basiquement, vous voulez référencer votre custom state (dans mon cas c'est l'activeTab du Repeating Group Tasks statu) et le comparer à la valeur de la Current Cell de votre Repeating Group.
Si c'est la même valeur, alors cela signifie que l'Onglet sélectionné est celui-ci, et que vous devez modifier son style.
Et voilà, tout ce dont vous avez besoin maintenant est de l'adapter à votre propre design !
Étape 4 - Afficher le bon contenu
Maintenant que nous avons nos Onglets faits, nous devons savoir comment afficher effectivement le contenu correspondant.
Eh bien, c'est assez basique.
Tout ce que nous devons faire est d'utiliser la valeur stockée dans notre Custom State pour ajouter des conditionnels pour afficher la Bonne chose quand nécessaire.
Voici comment faire cela :
1 - Cachez vos éléments par défaut
2 - Ajoutez une condition pour les faire apparaître quand nécessaire
Et voilà ! Répétez l'opération pour vos autres containers de contenu et vous serez prêt !
3 (optionnel) - Si vous voulez filtrer une Search
En passant, vous pourriez aussi utiliser la valeur de votre Custom State dans une Search Constraint.
Cela serait utile pour filtrer les Repeating Groups basés sur l'Onglet sélectionné (par exemple, montrer seulement les Tâches complétées quand l'onglet "Completed" est sélectionné).
