How to use with tabs

We have said a variable state can be only set to on or off. This is not true:

DANGER

Setting arbitrary values for variables is only intended for internal purposes yet, as tabs.

Although it can be used by the end user, no tests are made for it.

A variable state can be set to an arbitrary value with
data-toggler-states="variable:state".

The effect is:

Elements that listen to that variable and that state will react as adding the on classes, and removing the off clases.
Elements that listen to that variable but to other states will react as removing the on classes, and adding the off clases.

To use tabs in a comfortable way, we have added an alias that sets everything when the element is connected with data-toggler-target="toggleable".

See alias for data-toggler-tab-[link|content]

data-toggler-tab-link="group:content" is an alias of:
- data-action="toggler#states"
- data-toggler-states="-tabs_group,+tab_group_content"
- data-toggler-listen="-tabs_group,+tab_group_content"
data-toggler-tab-content="group:content" is an alias of:
- data-toggler-listen="-tabs_group,+tab_groups_content"

You should set data-toggler-tab-active in one data-toggler-tab-link to start with that tab enabled. If you don't want the tab-link to be active every time a target is connected, set also data-toggler-tab-active-forget in that tab-link.

TIP

We show a simplified example code for clarity purposes.

Example code

html

<div data-controller="toggler" class="example">
    <div class="tabs">
        <div class="tabs-selector">
            <a href="#tab-1" data-toggler-target="toggleable" data-toggler-tab-link="group:my_tab_1"  data-toggler-classes-on="..." data-toggler-classes-off="..." data-toggler-tab-active>Tab 1</a>
            <a href="#tab-2" data-toggler-target="toggleable" data-toggler-tab-link="group:my_tab_2"  data-toggler-classes-on="..." data-toggler-classes-off="...">Tab 2</a>
            <a href="#tab-3" data-toggler-target="toggleable" data-toggler-tab-link="group:my_tab_3"  data-toggler-classes-on="..." data-toggler-classes-off="...">Tab 3</a>
        </div>
        <div class="tabs-content">
            <div data-toggler-target="toggleable" data-toggler-tab-content="group:my_tab_1" class="hidden">Content tab 1</div>
            <div data-toggler-target="toggleable" data-toggler-tab-content="group:my_tab_2" class="hidden">Content tab 2</div>
            <div data-toggler-target="toggleable" data-toggler-tab-content="group:my_tab_3" class="hidden">Content tab 3</div>
        </div>
    </div>
</div>

Output

Click here to see the real input code of this output

html

<div data-controller="toggler" data-action="click@window->toggler#clickOutside" class="example tabs m-4">
    <!-- tabs container -->
    <div class="tabs">
        <!-- tabs selectors -->
        <div class="border-b border-gray-200 tabs-selector">
            <nav class="flex -mb-px space-x-8">
                <!-- tab 1 -->
                <a href="#account" id="tabs_account"
                    class="px-1 py-4 text-sm font-medium border-b-2 whitespace-nowrap"
                    data-toggler-target="toggleable"
                    data-toggler-tab-link="first:account"
                    data-toggler-classes-on="border-indigo-500 text-indigo-600"
                    data-toggler-classes-off="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                        My Account
                </a>
                <!-- tab 2 -->
                <a href="#company" id="tabs_company"
                    class="px-1 py-4 text-sm font-medium border-b-2 whitespace-nowrap"
                    data-toggler-target="toggleable"
                    data-toggler-tab-link="first:company"
                    data-toggler-classes-on="border-indigo-500 text-indigo-600"
                    data-toggler-classes-off="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                        Company
                </a>
                <!-- tab 3 -->
                <a href="#team" id="tabs_team"
                        class="px-1 py-4 text-sm font-medium border-b-2 whitespace-nowrap"
                        data-toggler-target="toggleable"
                        data-toggler-tab-link="first:team"
                        data-toggler-tab-active
                        data-toggler-classes-on="border-indigo-500 text-indigo-600"
                        data-toggler-classes-off="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                            Team Members
                </a>
                <!-- tab 4 -->
                <a href="#billing" id="tabs_billing"
                        class="px-1 py-4 text-sm font-medium border-b-2 whitespace-nowrap"
                        data-toggler-target="toggleable"
                        data-toggler-tab-link="first:billing"
                        data-toggler-classes-on="border-indigo-500 text-indigo-600"
                        data-toggler-classes-off="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                            Billing
                </a>
            </nav>
        </div>
        <!-- tabs contents -->
        <div class="tabs-content">
            <div id="tabs_content_account" data-toggler-target="toggleable" data-toggler-tab-content="first:account" class="hidden px-1 py-4 border-l border-b border-r">Account tab</div>
            <div id="tabs_content_company" data-toggler-target="toggleable" data-toggler-tab-content="first:company" class="hidden px-1 py-4 border-l border-b border-r">Company tab</div>
            <div id="tabs_content_team"    data-toggler-target="toggleable" data-toggler-tab-content="first:team"    class="hidden px-1 py-4 border-l border-b border-r">Team tab</div>
            <div id="tabs_content_billing" data-toggler-target="toggleable" data-toggler-tab-content="first:billing" class="hidden px-1 py-4 border-l border-b border-r">Billing tab</div>
        </div>
    </div>
</div>

How to use with tabs #

How to use with tabs