data-aether-ui

This attribute gives standard HTML elements a structural identity. It informs the system whether a div element is a "Tab Group" or an "Accordion Panel".

01 Accepted Values

This attribute takes the following values to build component-based structures. These values are typically used within a Parent (Group) and Child (Panel) relationship.

Value	Type	Description
tab-group	Parent	The main container encompassing tab buttons and panels.
tab-panel	Child	Content area visible only when the corresponding tab is clicked.
accordion-group	Parent	The main container encompassing the accordion list.
accordion-panel	Child	Detailed content that can be expanded or collapsed.

02 Scenario A: Tab System

To build a tab system, you must assign tab-group to the container and tab-panel to the contents. The system automatically hides panels and only shows the active one.

index.html

<!-- Wrapper -->
<div data-aether-ui="tab-group">

    <!-- Triggers -->
    <div class="flex gap-4">
        <button data-aether-trigger="tab" data-aether-target="general">General</button>
        <button data-aether-trigger="tab" data-aether-target="security">Security</button>
    </div>

    <!-- Panels -->
    <div id="general" data-aether-ui="tab-panel">
        General...
    </div>

    <div id="security" data-aether-ui="tab-panel">
        Security...
    </div>

</div>

03 Scenario B: Accordion System

Used for Frequently Asked Questions (FAQ) or detailed menus. By default, when one panel opens, others automatically close.

index.html

<!-- Wrapper -->
<div data-aether-ui="accordion-group">

    <!-- Item 1 -->
    <div>
        <button 
            data-aether-trigger="accordion" 
            data-aether-target="faq-1">
            Faq 1
        </button>
        <div id="faq-1" data-aether-ui="accordion-panel">
            ...
        </div>
    </div>

    <!-- Item 2 -->
    <div>
        <button 
            data-aether-trigger="accordion" 
            data-aether-target="faq-2">
            Faq 2
        </button>
        <div id="faq-2" data-aether-ui="accordion-panel">
            ...
        </div>
    </div>

</div>