Onglets

Aperçu

Le composant Avonni Tabs fournit une méthode structurée, intuitive et visuellement attrayante pour organiser et afficher différentes sections de contenu. Le composant offre un ensemble de propriétés configurables, permettant de créer des onglets orientés horizontalement ou verticalement, défilants et au style personnalisé afin de s'intégrer parfaitement à l'esthétique de votre site.

Ce composant utilise des slots pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.

Tutoriels

Bientôt disponible

Paramètres

🎛️ Propriétés

Nom	Description	Utilisation
Orientation	Définir l'orientation des onglets, en choisissant entre une disposition horizontale ou verticale.	Sélectionnez l'orientation qui convient le mieux à vos besoins de conception, en optimisant la disposition pour la navigation de l'utilisateur et la visibilité du contenu.
Portée limitée	Activer le style à portée limitée pour une application de style plus ciblée et spécifique aux onglets.	Utilisez cette fonctionnalité pour appliquer des styles confinés au composant, évitant les conflits de style non désirés avec d'autres éléments de la page.
Défilable et boutons de défilement	Rendez les onglets défilables et gérez la visibilité des boutons de défilement, garantissant une navigation facile même avec un grand nombre d'onglets.	Configurez les fonctionnalités de défilement en fonction de la quantité et de la disposition des onglets, en veillant à ce que les utilisateurs puissent facilement accéder et naviguer à travers tous les onglets disponibles.
Image d'arrière-plan du contenu CMS ou URL de l'image d'arrière-plan du contenu	Personnalisez l'arrière-plan de la zone de contenu des onglets en choisissant une image depuis le CMS ou en fournissant une URL.	Améliorez l'attrait visuel de vos onglets en appliquant une image d'arrière-plan qui complète le design et la présentation du contenu.
Source de données	Définissez la source des étiquettes et du contenu des onglets, permettant la configuration manuelle des propriétés des onglets telles que les étiquettes, les icônes et les info-bulles.	Utilisez cette fonctionnalité pour personnaliser les données des onglets, en veillant à ce que chaque onglet soit correctement étiqueté et enrichi d'icônes ou d'info-bulles selon les besoins.

🎨 Style

Nom	Description
Paramètres de taille	Définissez la largeur et la hauteur des onglets, en veillant à ce qu'ils s'intègrent parfaitement dans votre mise en page.
Styles d'arrière-plan et de bordure	Personnalisez les arrière-plans et les bordures avec des options telles que les couleurs et les tailles, améliorant la distinction visuelle de chaque onglet.
Styles des onglets	Ajustez divers aspects tels que l'alignement vertical, la largeur, la hauteur et l'espacement pour affiner l'apparence et la disposition des onglets.
Styles des étiquettes et sous-titres	Personnalisez l'apparence du texte à l'intérieur des onglets, en appliquant des couleurs et des styles de police pour améliorer la lisibilité et l'attrait esthétique.
Styles du bouton de débordement	Personnalisez l'apparence du bouton de débordement, en ajustant les couleurs du texte et de l'arrière-plan pour une cohérence visuelle.