1. Docs
  2. Tabs

Tabs Component

Create interactive, accessible tabbed interfaces with ease.

UnoCSS PresetTailwind Plugin

Installation

To begin, install the @flexilla/tabs package, or skip this if you’ve already installed @flexilla/flexilla.

Structure

Core Elements

  • tabs-container: Wraps all tab-related elements. Must include the data-fx-tabs attribute.
  • tabs-list-wrapper (optional): Wraps the tab-list. If used, it must include the data-tabs-list-wrapper attribute.
  • tab-list: Contains the individual tab-trigger elements, with the attribute data-tab-list.
  • tab-indicator (optional): A manually declared element with data-tab-indicator, placed inside data-tab-list.
  • tabs-panel-container (optional): Wraps the tab-panel elements and must include the data-panels-container attribute if used.
  • tab-trigger: Each clickable tab link, with the attributes data-tabs-trigger and data-target (where data-target is the id of the corresponding tab-panel).
  • tab-panel: The corresponding content for each tab, identified by data-tab-panel and id.
Here is an example of the basic HTML structure: 
<div data-fx-tabs>
    <div data-tab-list-wrapper>
        <ul data-tab-list role="tablist">
            <li role="presentation"> 
                <a href="#link" data-tabs-trigger data-target="tab1" tabindex="0"> Tab 1 </a>
            </li>
            <!-- other tab triggers -->
        </ul>
    </div>
    <div data-panels-container>
        <section role="tabpanel" tabindex="0" data-tab-panel data-state="active" id="tab1" aria-labelledby="tab1"> Tab 1 Content </section>
        <!-- other tab panels -->
    </div>
</div>

Example

Component Initialization

After installation, you can initialize the component in your project: 
import { Tabs } from '@flexilla/tabs';

const myTabs = new Tabs('#tabs-container', {
  // Additional options can be added here
});

Custom Tab Indicator

To use a custom indicator, declare it manually in the HTML markup inside data-tab-list. Tabs will only move an existing [data-tab-indicator]; they no longer create one for you. 
<ul data-tab-list role="tablist" class="relative">
  <span
    data-tab-indicator
    aria-hidden="true"
    class="ui-tabs-indicator bg-zinc-200 dark:bg-zinc-800 rounded"
  ></span>

  <li role="presentation">
    <a href="#tab1" data-tabs-trigger data-target="tab1">Tab 1</a>
  </li>
</ul>
The indicator should always stay inside data-tab-list. Its default component CSS already gives it position: absolute, so you only need to style its look.

CSS Requirements

For custom indicators, specific CSS is needed. If you’re using UnoCSS or TailwindCSS with @flexilla/uno-preset or @flexilla/tailwind-plugin, use the pre-built ui-tabs-indicator class. For pure CSS, add this to your stylesheet: 
.ui-tabs-indicator {
    position: absolute;
    transform-origin: 0 0;
    width: var(--un-tab-indicator-width);
    height: var(--un-tab-indicator-height);
    top: var(--un-tab-indicator-top);
    left: var(--un-tab-indicator-left);
}

Example

Vertical Orientation

Flexilla Tabs support vertical orientation as well, making it versatile for different layouts.

Attributes

Flexilla uses specific data-attributes to handle tab states, allowing easy customization.

data-state

The data-state attribute helps track the active/inactive states of a tab panel, which can be styled in CSS:
  • active: Marks the open tab panel.
  • inactive: Marks hidden panels.

aria-selected

This attribute is added to each tab-trigger, setting its value to true for the selected tab and false for others, ensuring accessibility.

Adding Keyframe Animations

To add animations when switching between tab panels (instead of simply toggling visibility), use CSS keyframes.

  1. Create Keyframes 

    @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

  2. Use It

    • With data-* attribute: 
      <div data-fx-tabs data-animated-panels data-show-animation="fadeIn .8s cubic-bezier(.48,1.55,.28,1)">
    <!-- Tab structure here -->
</div>
    • With JavaScript options: 
      new Tabs('.yourTabs', {
    animationOnShow: "fadeIn .8s cubic-bezier(.48,1.55,.28,1)"
});

Props, Parameters & Options

Parameters

tabs-container
HTMLElement|string
The container element for the tabs. Must be a valid selector or an HTML element.
options
TabsOptions
The options object for configuring tab behavior.

Options

The options object provides flexibility in customizing the Tabs component. 
const options = {
  onChangeTab({ currentTrigger, currentPanel }) {
    // Action when the tab changes
    console.log(currentTrigger, currentPanel);
  },
};
type TabsOptions = {
  defaultValue?: string,
  animationOnShow?: string,
  indicatorOptions?: IndicatorOptions,
  onChange?: () => void,
  onChangeTab?: ({ currentTrigger, currentPanel }: { currentTrigger?: HTMLElement, currentPanel?: HTMLElement }) => void
};
type IndicatorOptions = {
  transformDuration?: number,
  transformEasing?: string,
};

Methods

Initialization

Use the init static method to initialize tabs easily: 
import { Tabs } from "@flexilla/tabs";
Tabs.init(".my-tabs", { /* options */ });

Auto Initialization

Auto-initialize all elements with the data-fx-tabs attribute or a custom selector: 
Tabs.autoInit();  // Default selector
Tabs.autoInit('.custom-tabs-selector');  // Custom selector

Programmatic Tab Change

You can programmatically switch between tabs using the changeTab method: 
const myTab = new Tabs(/* initialize here */);
myTab.changeTab("aValidTabValue");

Cleanup

Call cleanup() when the tabs instance is no longer needed. 
myTab.cleanup();

Events

Tabs dispatch change-tab on the tabs root element whenever the active tab changes. 
const tabsEl = document.querySelector("[data-fx-tabs]");

new Tabs(tabsEl);

tabsEl.addEventListener("change-tab", (event) => {
  console.log(event.detail.currentTrigger, event.detail.currentPanel);
});