- Plugins
- Tabs
Plugins
Tailwind CSS Tabs
Tabs make it easy to switch between different views.
Installation
To get started, install Tabs plugin via npm, else you can skip this step if you are already using Preline UI as a package.
npm i @preline/tabs
Example
Separate content into different panes where each pane is viewable one at a time.
<div class="border-b border-gray-200 px-4 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="basic-tabs-item-1" data-hs-tab="#basic-tabs-1" aria-controls="basic-tabs-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="basic-tabs-item-2" data-hs-tab="#basic-tabs-2" aria-controls="basic-tabs-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="basic-tabs-item-3" data-hs-tab="#basic-tabs-3" aria-controls="basic-tabs-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3 p-4">
<div id="basic-tabs-1" role="tabpanel" aria-labelledby="basic-tabs-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="basic-tabs-2" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="basic-tabs-3" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Basic usage
Prefer to create your own style? Here is a completely unstylized example.
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="active" id="unstyled-tabs-item-1" data-hs-tab="#unstyled-tabs-1" aria-controls="unstyled-tabs-1" role="tab">
Tab 1
</button>
<button type="button" id="unstyled-tabs-item-2" data-hs-tab="#unstyled-tabs-2" aria-controls="unstyled-tabs-2" role="tab">
Tab 2
</button>
<button type="button" id="unstyled-tabs-item-3" data-hs-tab="#unstyled-tabs-3" aria-controls="unstyled-tabs-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="unstyled-tabs-1" role="tabpanel" aria-labelledby="unstyled-tabs-item-1">
This is the <em>first</em> item's tab body.
</div>
<div id="unstyled-tabs-2" class="hidden" role="tabpanel" aria-labelledby="unstyled-tabs-item-2">
This is the <em>second</em> item's tab body.
</div>
<div id="unstyled-tabs-3" class="hidden" role="tabpanel" aria-labelledby="unstyled-tabs-item-3">
This is the <em>third</em> item's tab body.
</div>
</div>
Methods
The HSTab
object is contained within the global window
object
Open item (static method).
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
HSTab.open(document.querySelector('#tab'))
});
Events
An example where a function is run every time a tab changes.
const el = HSTab.getInstance('#tab-1');
el.on('change', ({el, prev, current}) => {...});
Demo examples
Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.
Check out Preline UI Tabs