Aether JS AetherJS

data-aether-default-open

Bu nitelik, sayfa yüklendiğinde bir bileşenin (Tab, Accordion) varsayılan olarak açık/aktif gelmesini sağlar.


01 Kullanım

Bu bir "Varlık Niteliği"dir (Boolean). Genellikle Tetikleyiciler (Triggers) üzerine eklenir. Sistem başlatıldığında bu etiketi tarar ve ilgili hedefi otomatik olarak açar.

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

    <!-- Triggers -->
    <div class="flex space-x-4">
        <button data-aether-trigger="tab" data-aether-target="tab-1">
            Home
        </button>

        <button 
            data-aether-trigger="tab" 
            data-aether-target="tab-2"
            data-aether-default-open>
            Profile
        </button>
    </div>

    <!-- Panels -->
    <div id="tab-1" data-aether-ui="tab-panel">
        Home content...
    </div>

    <div id="tab-2" data-aether-ui="tab-panel">
        Profile content...
    </div>

</div>

02 Kullanım Alanları

Farklı UI desenlerinde nasıl davranış sergilediğine dair detaylar.

Bileşen Davranış
Tabs İşaretlenen sekme içeriği gösterilir, diğerleri gizlenir. Hiçbirine verilmezse, sistem genellikle ilk sekmeyi otomatik açar.
Accordion İşaretlenen panel genişletilmiş olarak gelir.

03 Akıllı Çakışma Yönetimi

URL Hash vs. Default Open

Eğer syncUrl: true özelliği aktifse, AetherJS tarayıcı adres çubuğuna öncelik verir.

Örneğin; kodunuzda "Profil" sekmesine default-open vermiş olsanız bile, kullanıcı sayfaya site.com/#ayarlar linkiyle gelirse, sistem "Profil" yerine "Ayarlar" sekmesini açar. Bu, kullanıcı deneyimi açısından en doğru davranıştır.