data-aether-click-outside

Bu nitelik, kullanıcının odaklandığı elementin dışına tıkladığını algılar ve elementi otomatik olarak kapatır. Modern web arayüzlerinde Dropdown menüler ve Modallar için vazgeçilmez bir UX standardıdır.

01 Kullanım

Bu bir "Varlık Niteliği"dir (Boolean). Sadece hedef elemente eklemeniz yeterlidir.

index.html

<!-- Wrapper -->
<div class="relative">

    <!-- Trigger -->
    <button
        class="px-4 py-2 cursor-pointer bg-primary border border-primary rounded-lg text-primary hover:text-primary-interactive hover:border-primary-interactive transition-colors flex items-center gap-2"
        data-aether-trigger="ui-control"
        data-aether-target="demo-dropdown">
        Open
    </button>

    <!-- Dropdown Menu -->
    <div
        id="demo-dropdown"
        class="hidden absolute left-0 mt-2 w-48 bg-primary border border-primary rounded-lg shadow-lg py-1 z-10"
        data-aether-click-outside>
        <a href="#" class="block px-4 py-2 text-sm text-secondary hover:bg-secondary hover:text-primary transition-colors">Profile</a>
        <a href="#" class="block px-4 py-2 text-sm text-secondary hover:bg-secondary hover:text-primary transition-colors">Settings</a>
    </div>

</div>

02 Akıllı Yığın Yönetimi

İç İçe Elementler

AetherUI, açık olan pencereleri bir "Yığın" mantığıyla takip eder.

Örneğin; bir Modal açıkken, onun içinden bir Dropdown açarsanız; ekrana (boşluğa) tıkladığınızda sistem önce en üstteki Dropdown'ı kapatır. Modal açık kalmaya devam eder. İkinci tıklamada Modal kapanır.