data-aether-ui

Bu nitelik, standart HTML elementlerine yapısal bir kimlik kazandırır. Bir div elementinin bir "Tab Grubu" mu yoksa bir "Accordion Paneli" mi olduğunu sisteme bildirir.

01 Kabul Edilen Değerler

Bu nitelik, bileşen tabanlı yapılar kurmak için aşağıdaki değerleri alır. Bu değerler genellikle Ebeveyn (Group) ve Çocuk (Panel) ilişkisi içinde kullanılır.

Değer	Tür	Açıklama
tab-group	Ebeveyn	Sekme butonlarını ve panellerini kapsayan ana konteyner.
tab-panel	Çocuk	Sadece ilgili sekme tıklandığında görünen içerik alanı.
accordion-group	Ebeveyn	Akordeon listesini kapsayan ana konteyner.
accordion-panel	Çocuk	Genişletilip daraltılabilen detay içeriği.

02 Senaryo A: Tab Sistemi

Sekme sistemi kurmak için kapsayıcıya tab-group ve içeriklere tab-panel vermelisiniz. Sistem otomatik olarak panelleri gizleyip sadece aktif olanı gösterir.

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 Senaryo B: Accordion Sistemi

Sıkça Sorulan Sorular (SSS) veya detaylı menüler için kullanılır. Varsayılan olarak bir panel açıldığında diğerleri otomatik kapanır.

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>