data-aether-active-class & inactive-class

AetherJS varsayılan olarak stilsizdir. Bu iki nitelik, elementlerin durumlarına göre (Açık/Kapalı, Seçili/Seçisiz) CSS sınıflarını dinamik olarak değiştirmenizi sağlar.

01 Çalışma Prensibi

Element aktif olduğunda sistem inactive-class içindeki sınıfları kaldırır ve active-class içindekileri ekler. Pasif duruma geçtiğinde ise tam tersini yapar.

Nitelik	Görevi	Tipik Kullanım
data-aether-active-class	Element aktifken uygulanacak sınıflar.	bg-blue-600 text-white (Buton için) block (Hedef için)
data-aether-inactive-class	Element pasifken uygulanacak sınıflar.	bg-gray-200 text-gray-500 (Buton için) hidden (Hedef için)

02 Kullanım

Özellikle Tab ve Accordion başlıklarında, kullanıcının hangi öğeyi seçtiğini göstermek için kullanılır.

index.html

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

    <!-- Item 1 -->
    <div>
        <button
            class="cursor-pointer text-lg"
            data-aether-active-class="text-accent"
            data-aether-inactive-class="text-primary"
            data-aether-trigger="accordion"
            data-aether-target="brands">
            Brands
        </button>
        <div
            id="brands"
            class="text-secondary"
            data-aether-ui="accordion-panel">
            Nike, Adidas, Puma...
        </div>
    </div>

    <!-- Item 2 -->
    <div>
        <button
            class="cursor-pointer text-lg"
            data-aether-active-class="text-accent"
            data-aether-inactive-class="text-primary"
            data-aether-trigger="accordion"
            data-aether-target="sizes">
            Sizes
        </button>
        <div
            id="sizes"
            class="text-secondary"
            data-aether-ui="accordion-panel">
            S, M, L, XL...
        </div>
    </div>

</div>