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 .tab-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.
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.
Styling
| CSS Variable | Default value | Description |
|---|---|---|
--ax-tab-bar-border
|
0.1rem solid #2196f3 | Tab border property. |
