Home Documentation
Getting started General
Components
Forms
Utilities
Check changelog.
0.5.3

Tabs

Tabs are a simple way to split your content in a simple tabbed view.

To create a tab, you have to add the .tab class to a div, and start creating your different tabs using an unordered list syntax.
Your ul have to be a .tab-menu which contains all the li with the .tab-link links.
These links refer to the IDs of your tab contents.

Content 1
Content 2
This is the 3rd content

Active tab / Full width

You can add the .active class to your tab link to make it the opened tab when the page is loaded.
The .full-width class on the tab make all the .tab-link take the full width of the tab.
Here, the second tab-link is active, and all the tabs take the full width.

Arrow option

The arrow option allows you to remove the tab scrollbar and replace it with two arrows.
To use it, simply wrap your .tab-menu inside a .tab-arrow div.
Then, you have to add the .tab-prev and .tab-next arrows inside your .tab-arrow.

Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7

JavaScript initialization

Once HTML was setup, you can activate the tab with this simple code.
Just pass the id of your tab that you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.

Options

Property Default value Description
animationType 300 Animation type.
Accepted values are 'none' or 'slide'.
animationDelay 'none' Opening and closing animation delay in ms.
caroulix '' If you are using the 'slide' animationType, you can add the caroulix options to modify here to modify the animation.

Methods

Method Description
updateActiveElement() Automatically detects the active tab, and update the active indicator placement.
If there is no active tabs, the first tab will be the choosen.
select(itemId) Select the tab corresponding to the itemId and show the corresponding content.

Events

Event Description
ax.tab.setup Event sent when the tab has been setup.
ax.tab.select Event sent when the select() method is called.