Zerolines.js

Tab

Basic Structure

Tab component requires tab-list and its children tab-item. Each tab-item must have target element to be toggled. You don't need to hide the tab contents by CSS, as Zerolines.js automatically hides it. 

<div data-zl="tab-list">
  <button type="button" data-zl="tab-item target-[#tab1] default active-style-[activeClass] default-style-[defaultClass]">
    Tab 1
  </button>
  <button type="button" data-zl="tab-item target-[#tab2] active-style-[activeClass] default-style-[defaultClass]">
    Tab 2
  </button>
</div>
<div id="tab1">
  <!-- Tab1 Content Here -->
</div>
<div id="tab2" zl-cloak>
  <!-- Tab2 Content Here -->
</div>

tab-list

tab-list has a role to group tab-items to switch style and display status.

Item Description

-

-

tab-item

Each tab-item is must be a child of tab-list. One of the tab-item should have default option to show as initial content when HTML loaded.

Item Description

target-[SELECTOR]

*required

Specify the target element to open. Put a CSS selector value between [ and ]. Double Quatation is not required. The target must be only one element.

Example

tab-item target-[#targetId]

default

(optional)

If a tab-item element has this default, target tab content will be active with active-style when HTML loaded.

Example

tab-item target-[#targetId] default

active-style-[CSS_CLASS_LIST]

(optional)

Put one or more class(separated by space) for active tab. When the tab-item active, specified active-style will be added to classList of HTML Element. When the tab-item inactive, active-style will be removed.

Example

active-style-[font-bold text-red-600]

default-style-[CSS_CLASS_LIST]

(optional)

Put one or more class(separated by space) for inactive tab. When the tab-item inactive, specified default-style will be added to classList of HTML Element. When the tab-item active, default-style will be removed.

Example

default-style-[text-gray-500]