Yükleme örtüsü

43 · Gelişmiş UI

Yükleme örtüsü

Bir işlem sürerken alanın üstünü yarı saydam bir katmanla örter ve tıklanmasını engeller. Bir Livewire işlemine ya da bir Alpine ifadesine bağlanır.

PRO acun:loading-overlay

Alpine ile

show bir Alpine ifadesidir; doğru olduğu sürece örtü görünür. Örtü en yakın relative kapsayıcıyı kaplar, bu yüzden kilitlenecek alana relative sınıfını verin.

CANLI ÖRNEK

<div class="relative rounded-sm border border-gray-200 p-6 dark:border-zinc-700" x-data="{ locked: false }">
    <p class="text-sm text-gray-600 dark:text-zinc-400">Rapor hazırlanırken bu alan kilitlenir.</p>
    <acun:button class="mt-4" size="sm" x-on:click="locked = true; setTimeout(() => locked = false, 2000)">Raporu hazırla</acun:button>
    <acun:loading-overlay show="locked" label="Hazırlanıyor" />
</div>

Prop	Değerler
`show`	Alpine ifadesi

Etiket

label göstergenin yanına görünür bir metin ekler ve ekran okuyucuya da bunu okutur; verilmezse yalnızca gösterge görünür. Bu örnekte show ve target verilmediği için örtü sürekli açıktır.

CANLI ÖRNEK

<div class="grid gap-4 sm:grid-cols-2">
    <div class="relative h-32 rounded-sm border border-gray-200 p-4 dark:border-zinc-700">
        <p class="text-sm text-gray-600 dark:text-zinc-400">Müşteri listesi</p>
        <acun:loading-overlay />
    </div>
    <div class="relative h-32 rounded-sm border border-gray-200 p-4 dark:border-zinc-700">
        <p class="text-sm text-gray-600 dark:text-zinc-400">Satış raporu</p>
        <acun:loading-overlay label="Rapor hazırlanıyor" />
    </div>
</div>

Prop	Değerler
`label`	Göstergenin yanındaki metin

Livewire ile

target bir ya da virgülle ayrılmış birkaç Livewire işleminin ya da özelliğinin adını alır (wire:target). Yalnızca bu istekler sürerken örtü görünür.

BLADE

<div class="relative">
    <acun:table>…</acun:table>
    <acun:loading-overlay target="arama,sirala,gotoPage" />
</div>

Prop	Değerler
`target`	İşlem adı \| ad1,ad2

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`target`	`null`	Livewire işlemi (wire:target); virgülle birden fazla
`show`	`null`	Alpine ifadesi; doğruyken görünür
`label`	`null`	Görünür metin ve ekran okuyucu etiketi