İşlemli kartlar

18 · Kartlar

İşlemli kartlar

Kart başlığındaki işlem alanı: açılır menü, düğmeler, daraltma ve kapatma. İçerik yenilenirken kart acun:loading-overlay ile kilitlenir.

PRO acun:card

Açılır menü

Başlığa açılır menü eklemek için actions slot'una acun:dropdown koyun; menü varsayılan olarak (align="end") sağ kenara hizalanır. Yalnızca ikondan oluşan tetikleyiciye aria-label verin.

CANLI ÖRNEK

<acun:card title="Ürün özeti" subtitle="Eylül 2026">
    <acun:slot:actions>
        <acun:dropdown align="end">
            <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="İşlemler"><acun:icon name="ellipsis-vertical" size="4" /></button>
            </acun:slot:trigger>
            <acun:dropdown.item>Yenile</acun:dropdown.item>
            <acun:dropdown.item>Excel'e aktar</acun:dropdown.item>
            <acun:dropdown.item href="#">Ürünleri aç</acun:dropdown.item>
        </acun:dropdown>
    </acun:slot:actions>
    <p class="text-sm text-gray-600 dark:text-zinc-400">38 yayında ürün, 4 taslak ürün.</p>
</acun:card>

Prop	Değerler
`actions`	Slot; başlığın sağı
`align (dropdown)`	end \| start

Düğmeler, daraltma ve kapatma

actions içeriği her zaman daraltma ve kapatma düğmelerinin solunda durur. Başlıkta bir iki işlem tutun; fazlasını açılır menüye taşıyın.

CANLI ÖRNEK

<acun:card title="Günlük özet" collapsible closable>
    <acun:slot:actions>
        <acun:button size="sm" variant="ghost">Tümü</acun:button>
    </acun:slot:actions>
    <p class="text-sm text-gray-600 dark:text-zinc-400">Bugün 214 sipariş alındı, 18 sipariş iptal edildi.</p>
</acun:card>

Prop	Değerler
`collapsible`	true \| false
`closable`	true \| false

Yenilerken kilitleme

Kartı relative bir kapsayıcıya alıp yanına acun:loading-overlay koyun; show ile verilen Alpine ifadesi doğru olduğu sürece kart kilitli kalır. Örnekte Yenile'ye basınca kart 1,5 saniye kilitlenir.

CANLI ÖRNEK

<div class="relative" x-data="{ loading: false }">
    <acun:card title="Bekleyen siparişler">
        <acun:slot:actions>
            <acun:button size="sm" variant="ghost" x-on:click="loading = true; setTimeout(() => loading = false, 1500)">Yenile</acun:button>
        </acun:slot:actions>
        <p class="text-sm text-gray-600 dark:text-zinc-400">36 sipariş kargoya verilmeyi bekliyor.</p>
    </acun:card>
    <acun:loading-overlay show="loading" />
</div>

Prop	Değerler
`show (loading-overlay)`	Alpine ifadesi

Livewire ile yenileme

Livewire bileşeninde örtüye target ile işlemin adını verin; o işlem sürerken kart kendiliğinden kilitlenir.

BLADE

<div class="relative">
    <acun:card title="Bugünkü siparişler">
        <acun:slot:actions>
            <acun:button size="sm" variant="ghost" wire:click="yenile">Yenile</acun:button>
        </acun:slot:actions>
        …
    </acun:card>
    <acun:loading-overlay target="yenile" />
</div>

Prop	Değerler
`target (loading-overlay)`	Livewire işlem adı

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`title, subtitle`	`null`	Başlık alanı
`collapsible`	`false`	Başlıkta daraltma düğmesi
`closable`	`false`	Başlıkta kapatma düğmesi
`padding`	`true`	false: gövde iç boşluksuz
`loading-overlay: show · target`	`null`	Alpine ifadesi · Livewire işlemi

Slot'lar: actions (başlığın sağı), footer (alt çubuk), varsayılan içerik (gövde)