İskelet

53 · Gelişmiş UI

İçerik yüklenirken onun yerinde duran, hafifçe yanıp sönen gri yer tutucu. Gerçek içeriğin biçimini taklit ederek sayfanın yüklenince zıplamasını önler.

PRO acun:skeleton

Varyantlar

Biçim variant ile seçilir; varsayılan block. text bir metin satırı yüksekliğindedir, circle avatar gibi yuvarlak öğeler içindir. Genişlik ve yükseklik bileşende sabit değildir, class ile verilir.

CANLI ÖRNEK

<div class="flex items-center gap-4">
    <acun:skeleton class="h-16 w-24" />
    <acun:skeleton variant="circle" class="size-12" />
    <div class="flex-1 space-y-2">
        <acun:skeleton variant="text" />
        <acun:skeleton variant="text" class="w-2/3" />
    </div>
</div>

Prop	Değerler
`variant`	block \| text \| circle
`class`	Boyut sınıfları (ör. h-16 w-24, size-12, w-2/3)

Kart iskeleti

Parçaları birleştirerek yüklenecek kartın taslağını çizin. Satır genişliklerini farklı tutmak, iskeletin gerçek metne benzemesini sağlar.

CANLI ÖRNEK

<acun:card>
    <div class="flex items-center gap-3">
        <acun:skeleton variant="circle" class="size-10" />
        <div class="flex-1 space-y-2">
            <acun:skeleton variant="text" class="w-2/3" />
            <acun:skeleton variant="text" class="w-1/3" />
        </div>
    </div>
    <acun:skeleton class="mt-4 h-24" />
</acun:card>

Liste iskeleti

Tablo ya da liste yüklenirken birkaç satırlık iskeleti döngüyle üretin. Satır sayısını sayfada beklenen kayıt sayısına yakın tutun.

CANLI ÖRNEK

<div class="divide-y divide-gray-100 rounded-sm bg-white shadow-sm dark:divide-zinc-800 dark:bg-zinc-900">
    @foreach (range(1, 4) as $satir)
        <div class="flex items-center gap-4 px-4 py-3">
            <acun:skeleton variant="text" class="w-1/3" />
            <acun:skeleton variant="text" class="w-1/5" />
            <acun:skeleton class="ms-auto h-5 w-14 rounded-full" />
        </div>
    @endforeach
</div>

Livewire ile

Livewire işlemi sürerken iskeleti wire:loading ile gösterin, gerçek içeriği wire:loading.remove ile gizleyin. wire:target ile yalnızca ilgili işleme bağlayın.

BLADE

<div wire:loading wire:target="raporuYenile" class="w-full space-y-2">
    <acun:skeleton variant="text" class="w-3/4" />
    <acun:skeleton variant="text" class="w-1/2" />
</div>

<div wire:loading.remove wire:target="raporuYenile">
    @include('raporlar.ozet')
</div>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`variant`	`block`	block · text (h-3) · circle; boyut class ile verilir