Conteneur à onglets

Le Conteneur à onglets est un composant de mise en page qui crée une interface à onglets. Chaque onglet agit comme un conteneur, ce qui signifie que vous pouvez y placer n’importe quel autre composant Avonni.

Différence clé avec le composant Tabs

Comprendre la différence fondamentale 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 au sein de chaque onglet

Configurer votre conteneur à onglets

Ce sont les minimum étapes requises pour obtenir un conteneur à onglets fonctionnel :

Ajouter le conteneur à onglets

Faites glisser un composant Conteneur à onglets sur la zone de travail.

Ajouter des onglets (éléments)

• Dans le panneau Propriétés, trouvez la Éléments propriété. Cliquez sur le bouton/lien pour ouvrir l'éditeur d'éléments.

• Cliquez sur "Ajouter des éléments" pour ajouter un nouvel onglet. Ajoutez au moins deux onglets pour voir la fonctionnalité d'onglets.

• Pour chaque onglet :

  • Étiquette : Saisissez le texte que vous souhaitez afficher sur l'onglet lui-même (par ex. « Détails », « Contacts »).

  • Valeur : Saisissez une identifiant valeur pour l'onglet (par ex. « details », « contacts »). Évitez les espaces ou les caractères spéciaux. Cette valeur est utilisée pour l'accès programmatique (par ex. définir l'onglet actif).

  • Nom de l'icône : Le nom d'une icône Avonni (ou d'une icône SLDS de Salesforce) à afficher sur l'onglet. Cela ajoute un indice visuel à l'onglet. Exemple : utility:info, standard:account.

  • Position de l'icône : Où afficher l'icône. Les valeurs possibles sont Haut, gauche ou droite.

  • Infobulle : Une brève description texte qui apparaît lorsque l'utilisateur place le curseur de la souris sur l'onglet. Utilisez les infobulles pour fournir un contexte ou des instructions supplémentaires.

  • Sous-titre : Le texte sera affiché ci-dessous le libellé principal de l'onglet. Cela peut être utilisé pour fournir une seconde ligne d'information ou une brève description du contenu de l'onglet

Ajouter du contenu aux onglets

• Sélectionnez le composant Conteneur à onglets sur la zone de travail.

• Cliquez sur un onglet dans l'aperçu pour sélectionner la zone de contenu de cet onglet.

• Faites glisser d'autres composants Avonni depuis la bibliothèque de composants dans la zone de contenu de l'onglet sélectionné. C'est ce qui rend le conteneur à onglets si puissant.

C'est tout ! À ce stade, vous devriez avoir un conteneur à onglets fonctionnel avec plusieurs onglets, et vous pouvez basculer entre les onglets pour voir les différentes zones de contenu. Vous doit ajoutez du contenu à chaque onglet pour le voir correctement.

Options de configuration supplémentaires

Ces paramètres offrent une personnalisation et un contrôle supplémentaires sur l'apparence et le comportement du conteneur à onglets :

• Valeur de l'élément actif : Le propriété de l'onglet actuellement sélectionné. Vous pouvez lier cela à une ressource Variable pour contrôler quel onglet est actif de manière programmatique et pour réagir aux changements d'onglet.

• Défilable : Activez ceci si vous avez de nombreux onglets qui pourraient ne pas tenir dans la largeur disponible (orientation horizontale) ou la hauteur (orientation verticale).

• Afficher les boutons de défilement : Si Défilable est activé, cela contrôle si des boutons de défilement explicites (flèches) sont affichés.

• Portée : Si activé, regroupe visuellement les onglets.

• Orientation :

  • Horizontale (par défaut) : Les onglets sont affichés en haut.

  • Verticale : Les onglets sont affichés sur le côté (généralement à gauche).

Sélection d'onglet (Valeur de l'élément actif)

Le Valeur de l'élément actif la propriété contrôle quel onglet est sélectionné. Réglez-la sur le propriété de l'onglet souhaité. Vous pouvez définir une valeur par défaut directement.