Onglets

Le composant Onglets Avonni vous aide à organiser et afficher des informations sur une seule page. Il vous permet de séparer les informations en différents onglets, facilitant la recherche pour les utilisateurs.

Différence clé avec le composant Tabs

Comprendre la différence entre le Avonni Tabs et Conteneur à onglets les composants est essentiel, car ils servent des objectifs distincts.

• Avonni Tabs: Ce composant est conçu pour créer des onglets dynamiquement à partir d'une source de données. Vous le connectez à une source de données (comme une liste d'enregistrements, une liste de sélection ou des valeurs saisies manuellement), et le composant génère automatiquement un onglet pour chaque élément dans cette source de données. Vous ne peut pas glisser-déposer d'autres composants Avonni à l'intérieur des onglets. Pensez-y comme un élément de navigation piloté par les données.

• Conteneur à onglets: Ce composant est un conteneur de mise en page. Il vous permet de créer une structure à onglets, puis manuellement ajouter et organiser n'importe quel les composants Avonni dans la zone de contenu de chaque l'onglet. Vous avez une liberté totale pour concevoir la mise en page et le contenu de chaque onglet indépendamment. Il s'agit de structurer votre interface utilisateur et d'organiser d'autres composants.

Utilisez le Avonni Tabs composant pour créer des onglets basés sur une liste d'enregistrements ou d'options. Utilisez le Conteneur à onglets composant lors de la création d'une mise en page à onglets avec des composants arbitraires dans chaque onglet.

Configurer vos onglets

1. Configurer la source de données

Avant que vos onglets ne puissent afficher du contenu, vous devez indiquer d'où ils doivent obtenir les données. Le composant Avonni Tabs offre des options flexibles pour se connecter à différentes sources de données, en fonction de vos besoins et de la façon dont vous souhaitez gérer le contenu des onglets.

Choisissez comment remplir les noms de vos onglets :

2. Définir l'onglet actif

Lorsque votre composant Tabs se charge pour la première fois, vous souhaiterez vous assurer que le bon onglet est affiché à l'utilisateur. Cela est contrôlé par le paramètre « Valeur d'onglet actif ».

• Comprendre les valeurs d'onglet : Chaque onglet de votre composant est associé à une valeur spécifique, généralement identique à l'étiquette de l'onglet. Cette valeur sert d'identifiant pour l'onglet.

• Définir la valeur par défaut : Pour choisir quel onglet doit être actif initialement, entrez sa valeur correspondante dans le champ « Valeur d'onglet actif ».

  • https://docs.google.com/gview?embedded=true&url=[votre URL PDF] Si vous avez un onglet intitulé « Détails », et que vous souhaitez qu'il soit le premier onglet que les utilisateurs voient, vous saisiriez « Détails » dans le champ « Valeur d'onglet actif ».

Remarque importante

Il est crucial de saisir la valeur de l'onglet exactement comme elle apparaît dans votre configuration d'onglet. Même de petites différences d'orthographe ou de majuscules peuvent empêcher la sélection correcte de l'onglet.

3. Configurer le défilement (optionnel)

Si vous avez de nombreux onglets qui ne tiennent pas tous à l'écran en même temps, vous pouvez activer le défilement pour permettre aux utilisateurs d'accéder à tous les onglets. Avonni propose deux options de défilement :

• Onglets déroulants : Cette option permet aux utilisateurs de balayer vers la gauche ou la droite sur les onglets pour révéler des onglets supplémentaires qui sont hors écran. Cela offre un moyen fluide et intuitif de naviguer entre les onglets, surtout sur les appareils tactiles.

• Boutons de défilement : Si vous préférez une manière plus explicite de faire défiler les onglets, vous pouvez activer les boutons de défilement. Cela affichera des boutons de chaque côté de la barre d'onglets que les utilisateurs peuvent cliquer pour faire défiler les onglets. Cette option affiche également le nombre total d'onglets, ce qui peut aider les utilisateurs à comprendre l'étendue du contenu.

Le choix entre onglets déroulants et boutons de défilement dépend de vos préférences de conception et du nombre d'onglets que vous avez. Les onglets déroulants offrent un aspect plus épuré, tandis que les boutons de défilement fournissent des contrôles plus explicites et des informations sur le nombre d'onglets.

4. Changer l'orientation

Le composant Avonni Tabs offre de la flexibilité dans la manière dont vous disposez vos onglets. Vous pouvez choisir entre deux orientations :

• Horizontal : Ceci est l'orientation la plus courante pour les onglets, où ils sont disposés horizontalement en haut ou en bas de la section. Cette mise en page est idéale lorsque vous avez un nombre limité d'onglets ou que vous souhaitez maintenir une hiérarchie visuelle claire avec le contenu sous les onglets.

• Unit Dans cette orientation, les onglets sont disposés verticalement, généralement sur le côté gauche ou droit de la section. Cette mise en page convient lorsque vous avez de nombreux onglets ou que vous souhaitez maximiser l'espace horizontal disponible pour votre contenu.

Le choix entre orientation horizontale et verticale dépend de vos préférences de conception, du nombre d'onglets que vous avez et de la mise en page globale de votre page.

5. Définir les interactions

Interactions vous permettent d'ajouter un comportement dynamique à vos onglets, les rendant plus que de simples éléments de navigation statiques.

• Au clic sur un onglet : Cette interaction vous permet de définir ce qui se passe lorsqu'un utilisateur clique sur un onglet pour l'activer. Vous pouvez choisir parmi une variété d'actions, telles que :

  • Navigation : Naviguer vers une page ou une section différente au sein de votre application.

  • Afficher des messages : Afficher un message toast ou ouvrir une boîte de dialogue modale pour fournir un retour ou des informations à l'utilisateur.

  • Et plus : Explorez l'ensemble des interactions disponibles pour créer une expérience utilisateur dynamique et engageante

Style

Le composant Avonni Tabs propose un large éventail d'options de style pour s'intégrer à votre design et offrir une expérience conviviale. Vous pouvez personnaliser les couleurs, les polices, les bordures, les espacements et plus encore pour correspondre à votre image de marque et à vos préférences.