Popover

39 · UI öğeleri

Tetikleyiciye tıklanınca açılan, isteğe bağlı başlıklı bilgi balonu. Birkaç cümlelik açıklamalar için uygundur; tek satırlık ipuçlarında acun:tooltip kullanın.

acun:popover

Temel kullanım

Tetikleyiciyi trigger slot'una, içeriği varsayılan slot'a yazın; title üstte ayrı bir başlık satırı açar. Balon tetikleyiciye yeniden tıklanınca, dışarı tıklanınca ya da Esc ile kapanır.

CANLI ÖRNEK

<acun:popover title="İade kuralı">
    <acun:slot:trigger><acun:button variant="white" size="sm">Neden iade edilemiyor?</acun:button></acun:slot:trigger>
    Ürünler teslimattan sonraki 14 gün içinde iade edilebilir. Bu sipariş 12 Eylül'de teslim edildi.
</acun:popover>

Prop	Değerler
`title`	Başlık satırı
`trigger`	Slot; tıklanınca balonu açar

Konum ve hizalama

position="top" balonu tetikleyicinin üstünde açar; varsayılan alttır. align="end" balonu tetikleyicinin sağ kenarına hizalar; sayfanın sağındaki düğmelerde taşmayı önler.

CANLI ÖRNEK

<div class="flex flex-wrap justify-between gap-4">
    <acun:popover position="top" title="Kargo bilgisi">
        <acun:slot:trigger><acun:button variant="white" size="sm">Üstte açılır</acun:button></acun:slot:trigger>
        Kadıköy deposundaki 148 sipariş Salı günü kargoya verilir.
    </acun:popover>

    <acun:popover align="end" title="Kargo bilgisi">
        <acun:slot:trigger><acun:button variant="white" size="sm">Sağa hizalı</acun:button></acun:slot:trigger>
        Ankara deposundaki 205 sipariş Perşembe günü kargoya verilir.
    </acun:popover>
</div>

Prop	Değerler
`position`	bottom \| top
`align`	start \| end

Başlıksız ve zengin içerik

Başlık verilmezse balon yalnızca içerikten oluşur. İçeriğe bağlantı ya da düğme koyabilirsiniz; verilen class içerik alanına eklenir. Balonun genişliği sabittir (18rem).

CANLI ÖRNEK

<div class="flex items-center gap-2 text-sm text-gray-700 dark:text-zinc-300">
    Durum: <acun:badge variant="warning">Teslim edilemedi</acun:badge>
    <acun:popover>
        <acun:slot:trigger>
            <button type="button" class="flex size-7 cursor-pointer items-center justify-center rounded-sm text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-800" aria-label="Durum açıklaması"><acun:icon name="information-circle" size="4" /></button>
        </acun:slot:trigger>
        <p class="font-medium text-gray-900 dark:text-zinc-100">İki denemede de adreste kimse yoktu</p>
        <p class="mt-1">Kargo firması yarın üçüncü kez teslim etmeyi deneyecek.</p>
        <a href="#" class="mt-2 inline-block font-medium text-brand-600 hover:underline dark:text-brand-400">Kargo geçmişi</a>
    </acun:popover>
</div>

Prop	Değerler
`class`	İçerik alanına eklenir

Parçalı kullanım

acun:popover.trigger içindeki düğme ya da bağlantı balonu açar (aria-expanded ve aria-controls kendiliğinden eklenir); içerik acun:popover.content (title) içine yazılır. w-* sınıfı varsayılan genişliği değiştirir. Esc ve dışarı tıklama balonu kapatır.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-6">
    <acun:popover>
        <acun:popover.trigger>
            <acun:button variant="white"><acun:icon name="information-circle" size="4" /> İade kuralı</acun:button>
        </acun:popover.trigger>

        <acun:popover.content title="İade süresi">
            Ürünler teslimattan sonraki 14 gün içinde iade edilebilir. Süre geçtiyse destek uzmanı mağaza yöneticisinden onay ister.
        </acun:popover.content>
    </acun:popover>

    <acun:popover align="end">
        <acun:popover.trigger>
            <button type="button" class="text-sm font-medium text-brand-600 underline-offset-4 hover:underline dark:text-brand-400">3 sipariş bekliyor</button>
        </acun:popover.trigger>

        <acun:popover.content title="Bekleyen siparişler" class="w-80">
            <ul class="space-y-1.5">
                <li>Cumhuriyet Mah. 12. Sok. No: 4 · alıcı adreste yok</li>
                <li>Atatürk Cad. No: 87 D: 3 · teslimat 15:00'te</li>
                <li>Lale Sok. No: 15 · adres teyidi bekleniyor</li>
            </ul>
        </acun:popover.content>
    </acun:popover>
</div>

Prop	Değerler
`acun:popover.trigger`	Balonu açan düğme ya da bağlantı
`acun:popover.content`	title; class ile genişlik

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`title`	`null`	Başlık satırı
`position`	`bottom`	bottom · top
`align`	`start`	start · end
`popover.content: title`	`null`	Parçalı kullanım: balonun başlığı; class ile genişlik (ör. w-80)

Slot'lar: trigger (tetikleyici), varsayılan içerik · Parçalı: acun:popover.trigger ve acun:popover.content