L’élément Tabs vous permet d’ajouter des onglets à vos conceptions. Cliquer sur un onglet affichera le contenu associé à cet onglet. Le contenu associé aux autres onglets sera masqué.
Pour ajouter un élément Tabs à votre page, cliquez sur +Add > Helpers > Tabs.
Un élément Tabs se compose de deux parties : les Onglets en eux-mêmes et une zone de contenu propre à chaque onglet, respectivement Tabs et Tabs Contents dans le panneau Structure.
Par exemple, un clic sur le premier onglet affichera le contenu affecté à ce premier onglet. Un clic sur le cinquième onglet affichera le contenu affecté à ce cinquième onglet, etc.
Tout type d’éléments peut être placé dans un onglet ou sa zone de contenu. Par défaut, des éléments Text sont placés à l’intérieur de chaque onglet et de leur zone de contenu respective, mais ils peuvent être supprimés et remplacés…
Pour ajouter un autre onglet ou contenu d’onglet, cliquez simplement sur un élément existant d’onglet ou de contenu d’onglet et dupliquez-le.
Vous pouvez également sélectionner l’élément Tabs et utiliser le bouton Ajouter un onglet pour ajouter un autre onglet. Cela ajoutera aussi automatiquement un autre élément Tab Content.
Remarque : la suppression d’un onglet ne supprime pas la zone de contenu associée.
Oxygen crée automatiquement une classe CSS et l’ajoute à tous les éléments de l’onglet, ainsi qu’une classe active qui ne sera appliquée qu’au dernier onglet cliqué.
Pour styler tous les éléments de l’onglet en même temps, cliquez sur un onglet, puis choisissez la classe tabs-****-tab. Les styles appliqués à cette classe seront appliqués à tous les éléments de l’onglet.
Pour styler uniquement l’onglet actif, cliquez sur un onglet, puis choisissez la class onglets tabs-****-tab-active. Les styles appliqués à cette classe ne seront appliqués qu’à la classe active.
Pour mettre en forme vos onglets, les éléments à l’intérieur d’un onglet ou les éléments à l’intérieur du contenu d’onglets, vous pouvez utiliser tous les réglages habituels d’Oxygen.
Ph. Reskator
