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.
  • 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

You can add a custom indicator to visually highlight the active tab. There are two ways to implement this:
  • Using the data-attribute:
    Add the data-indicator-class-name attribute to the tabs-container: 
    <div data-fx-tabs data-indicator-class-name="ui-tabs-indicator bg-zinc-200 dark:bg-zinc-800 flex rounded absolute ease-linear duration-200">
    <!-- Tab content here -->
</div>
  • Using the options object:
    You can pass the indicator’s class name through the indicatorOptions in the options object: 
    new Tabs('.yourTabs', {
    indicatorOptions: {
        className: "custom-indicator-classes"
    }
});

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 = {
  onTabChange({ activeTab }) {
    // Action when the tab changes
  },
};

type TabsOptions = {
  defaultValue?: string,
  animationOnShow?: string,
  indicatorOptions?: IndicatorOptions,
  onChange?: () => void,
  onChangeTab?: ({ currentTrigger, currentPanel }: { currentTrigger?: HTMLElement, currentPanel?: HTMLElement }) => void
};
onTabChange
method
Executes when the active tab changes.

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");