The Tabs element allows you to add tabbed content to your designs. Clicking a tab will show the content associated with that tab. The content associated with the other tabs will be hidden.
Add a Tabs element to your page from Add+ > Helpers > Tabs.
Structure Of Tabs
There are two parts to a Tabs element: Tabs and Tabs Contents.
The Tabs element contains multiple Tab elements. The Tabs Contents contains a Tab Content for each Tab.
Clicking a Tab will show its corresponding Tab Content element.
For example, clicking the first Tab will show the first Tab Content element. Clicking the fifth Tab will show the fifth Tab Content element.
Any elements can be placed inside a Tab or Tab Content. By default, text elements are placed inside each Tab and Tab Content, but these can be deleted.
Adding & Deleting a Tab or a Tab Content
To add another Tab or Tab Content, simply click an existing Tab or Tab Content element and duplicate it.
You can also select the Tabs element and use the Add Tab button to add another Tab. This will also automatically add another Tab Content element.
Deleting a Tab will not delete its associated Tab Content.
Styling Tabs
Oxygen automatically creates a class and adds it to all the Tab elements, and an active class that will only be applied to the last clicked tab.
To style all Tab elements at the same time, click a Tab, then choose the tabs-****-tab class. Styles applied to this class will be applied to all of the Tab elements.
To style just the active Tab, click a Tab, then choose the tabs-****-tab-active class. Styles applied to this class will only be applied to the currently active class.
To layout your list of Tabs, elements inside a Tab, or elements inside a Tab Content, you can use Oxygen's standard layout controls.
