Tabs
These responsive tabs component can be used to create a secondary navigational hierarchy for your website or to toggle content within a container.
The tabs component can be used as an additional navigational hierarchy to supplement the main navbar, or it can be used to alter content inside a container just below the tabs using Skewind data-{api}.
The Tabs component is not included as a core component because it is unlikely to be used on every page. So you have to import it manually when it is actually needed on the page.
But with that being said, you can also add it as a core component at any time through the main.js file.
Overviews #
These are some overviews of the tabs component. Use the options to change variants.
Basic Usage #
You just need to follow the example code to show a list of links that the user can navigate on your website.
Tabs Variants #
The default tabs variant is tabs--default, just like in the above examples. We provide a few more variants that are listed below. Append the tabs--{style} class to apply it.
Underlined Tabs #
Use this alternative style with an underline instead of a background when hovering and being active on a certain page. Add tabs--underline class to use it.
Pills Tabs #
You can also use pills as a style for the tab by adding the tabs--pills class.
Full Width Tabs #
If you have to make the tabs full width, the tailwindcss utility [&>li]:flex-1 can come in handy.
Interactive Tabs #
The Tabs javascript component is used to create interactive tabs that enable interaction between tabs and its content based on the parameters, options, methods, and events applied. Choose one of these methods to make an interactive tab. But still, the easiest is via data attributes.
Via Data Attributes #
Use the tabs data-{api} to interactively show or hide the content below the tabs matched by currently active tab. Just initialize the toggle element with data-tabs-toggle.
Each tab toggle button must include a role="tab" attribute as well as a data-tabs-target="{contentSelector}" attribute to specify which the tab content element will be displayed upon clicking.
Use aria-selected="true" on any tab element to make it active by default. If it is not set, then it will be the first tab.
Apply the role="tabpanel" to each tab content element and set the id or some other attribute to be equal to the data-tabs-target="{contentSelector}" from the tab element.
You can use multiple tab components on a single page, but the ids must be unique.
Via Javascript #
Initialize tabs component by calling the Tabs.createInstance(element, options) function. There is a required items option and each item should contain triggerEl and targetElement. Let's pay attention to the example below.
| Function | Description |
|---|---|
Tabs.createInstance(element, options) |
Create a Tabs instance. |
Tabs.getInstance(element, options) |
If any, get the Tabs instance. |
Tabs.getOrCreateInstance(element, options) |
Get the Tabs instance if there is one. Create it if necessary. |
Tabs.destroyInstance(element) |
To destroy a Tabs instance. Usually called before removing the element. |
Tabs.dataApi(wrapperElement) |
Execute the Data API within the specified wrapperElement. |
API #
Parameters #
Most Skewind component constructor accept two parameters, as well as the Tabs component.
| Parameter | Type | Required | Description |
|---|---|---|---|
element |
HTMLElement | Required | An HTMLElement that wraps tabs toggles, this element is also used as the key to locating the tab instance. |
options |
Object | Required | An object of options to set the tab items and something else. For more information, take a look at the next section. |
Options #
Currently, there is only one option.
| Option | Type | Required | Description |
|---|---|---|---|
items |
HTMLElement | Required | The array of the tab item including trigger element, and the content element. |
activeClasses |
string | Optional. Default: tab--active |
Classnames to be applied when the tab element is active. |
onShow |
Function | Optional | A callback function that receives one tabItem parameter, which is the tab that is currently being shown. |
Methods #
Each instance has these public methods.
| Methods | Return | Description |
|---|---|---|
show(item) |
void | To change the current active tab by passing one of the options.items described above. |
getActiveTab() |
Object | Return the current active tab. |
dispose() |
void | Alternative to Tabs.destroyInstance. Just in case you want to remove the tab elements, call this first. |
Events #
This event may be emitted for hooking into alert functionality.
| Event | Description |
|---|---|
dismissible.dismiss |
Emitted immediately when the alert is about to be dismissed. |