Boş durum

54 · Gelişmiş UI

Liste boşken ya da arama sonuç vermediğinde tablonun yerine gösterilen kutu. Kullanıcıya neden bir şey görmediğini söyler ve mümkünse bir sonraki adımı önerir.

PRO acun:empty-state

Temel kullanım

title zorunludur ve kısa bir durum cümlesi olmalıdır. description ile ne yapılabileceğini bir cümleyle açıklayın.

CANLI ÖRNEK

<acun:empty-state title="Henüz sipariş yok" description="Bu mağazada bu ay için kaydedilmiş sipariş bulunmuyor." />

Prop	Değerler
`title`	Zorunlu durum başlığı
`description`	İsteğe bağlı açıklama

İkonlu

icon slot'u başlığın üstüne soluk renkte bir ikon yerleştirir. Durumu anlatan tek bir ikon seçin ve acun:icon ile size="8" civarında kullanın.

CANLI ÖRNEK

<acun:empty-state title="Belge yüklenmemiş" description="Müşteriye ait fatura ve sözleşme belgeleri burada listelenir.">
    <acun:slot:icon><acun:icon name="folder-open" size="8" stroke="1.5" /></acun:slot:icon>
</acun:empty-state>

Prop	Değerler
`icon`	Slot: başlığın üstündeki ikon

İşlem düğmeli

action slot'u açıklamanın altına bir düğme ekler. Kullanıcının boş durumdan çıkmasını sağlayan tek bir işlem koyun.

CANLI ÖRNEK

<acun:empty-state title="Kayıt bulunamadı" description="Arama veya filtre kriterlerinizi değiştirmeyi deneyin.">
    <acun:slot:icon><acun:icon name="magnifying-glass" size="8" stroke="1.5" /></acun:slot:icon>
    <acun:slot:action><acun:button variant="white" size="sm">Filtreleri temizle</acun:button></acun:slot:action>
</acun:empty-state>

Prop	Değerler
`action`	Slot: açıklamanın altındaki düğme

İlk kayıt ve sonuç yok

İki durumu ayırın: hiç kayıt yoksa ilk kaydı oluşturmaya yönlendirin; arama ya da filtre sonuç vermediyse aramayı değiştirmeyi önerin. DataTable da bu ayrımı kendiliğinden yapar.

CANLI ÖRNEK

<div class="grid gap-4 md:grid-cols-2">
    <acun:empty-state title="Henüz ürün eklenmemiş" description="İlk ürünü ekleyerek satışa başlayın.">
        <acun:slot:icon><acun:icon name="cube" size="8" stroke="1.5" /></acun:slot:icon>
        <acun:slot:action><acun:button size="sm">Yeni Ürün</acun:button></acun:slot:action>
    </acun:empty-state>

    <acun:empty-state title="Sonuç bulunamadı" description="“kulaklk” için eşleşen ürün yok.">
        <acun:slot:icon><acun:icon name="magnifying-glass" size="8" stroke="1.5" /></acun:slot:icon>
        <acun:slot:action><acun:button variant="white" size="sm">Aramayı temizle</acun:button></acun:slot:action>
    </acun:empty-state>
</div>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`title`	—	Zorunlu. Durum başlığı
`description`	`null`	Başlığın altındaki açıklama

Slot'lar: icon: başlığın üstündeki ikon · action: açıklamanın altındaki işlem.