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.
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
.
Tips
You'll want to change the active tab color to make it match to your website design.
The following code makes you able to change it :
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.
Options
Property | Default value | Description |
---|---|---|
animationType | 'none' |
Animation type. Accepted values are 'none' or
'slide' .
|
animationDuration | 300 | Opening and closing animation duration in ms. |
disableActiveBar | false | Disable the bar of the active tab. |
caroulix | '' |
If you are using the 'slide' animationType, you can add the
caroulix options
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. |
next() |
Goes to the next tab-item. The step parameter is optional and allows you to define how much tab-items
you want to go through. The default value is 1.
|
prev() |
Goes to the previous tab-item. The step parameter is optional and allows you to define how much tab-items
you want to go through. The default value is 1.
|
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. This event has details data : {index} index : index of the selected tab-item.
|
ax.tab.next |
Event sent when the next() method is called. This event has details data : {step} step : how much tab-items have been slided.
|
ax.tab.prev |
Event sent when the prev() method is called. This event has details data : {step} step : how much tab-items have been slided.
|
Event details
Some events bring details, you can access them with e.details
.