İlerleme

34 · UI öğeleri

Bir işin ne kadarının tamamlandığını yatay bir çubukla gösterir. Değer sunucudan sabit gelebilir ya da tarayıcıda değişen bir Alpine ifadesine bağlanabilir.

acun:progress

Temel kullanım

value 0 ile 100 arasında bir yüzde alır; aralık dışındaki değerler sınıra çekilir. label görünmez, yalnızca ekran okuyucuya okunur (varsayılan "İlerleme"); görünen bir başlık gerekiyorsa çubuğun üstüne kendiniz yazın.

CANLI ÖRNEK

<div class="space-y-1.5">
    <div class="flex justify-between text-sm">
        <span class="font-medium text-gray-900 dark:text-zinc-100">Satış hedefi</span>
        <span class="tabular-nums">68%</span>
    </div>
    <acun:progress :value="68" label="Satış hedefi" />
</div>

Prop	Değerler
`value`	0 – 100 (yüzde)
`label`	Ekran okuyucu etiketi

Boyutlar

Çubuğun kalınlığı size ile seçilir; varsayılan md. Kart ve tablo satırlarında sm, sayfanın ana ilerleme göstergesinde lg uygundur.

CANLI ÖRNEK

<div class="space-y-4">
    <acun:progress :value="40" size="sm" />
    <acun:progress :value="55" />
    <acun:progress :value="70" size="lg" />
</div>

Prop	Değerler
`size`	sm \| md \| lg

Renkler

Çubuğun rengi color ile seçilir: butonlarla aynı palet adları, varsayılan primary. Doluluk oranına göre renk değiştirmek için değeri sunucuda seçin (ör. %90 üstü danger).

CANLI ÖRNEK

<div class="space-y-3">
    <acun:progress :value="70" />
    <acun:progress :value="60" color="success" />
    <acun:progress :value="50" color="info" />
    <acun:progress :value="40" color="warning" />
    <acun:progress :value="30" color="danger" />
    <acun:progress :value="20" color="secondary" />
    <acun:progress :value="10" color="dark" />
</div>

Prop	Değerler
`color`	primary \| secondary \| success \| danger \| warning \| info \| dark

Şeritli ve hareketli

striped dolu kısma çapraz şeritler ekler; animated şeritleri de ekleyip kaydırır ve işin sürdüğünü hissettirir. Hareket azaltma tercihi açık olan kullanıcılarda animasyon durur.

CANLI ÖRNEK

<div class="space-y-4">
    <acun:progress :value="45" size="lg" striped />
    <acun:progress :value="80" size="lg" animated />
</div>

Prop	Değerler
`striped`	true \| false
`animated`	true \| false (şeritleri de açar)

Alpine ile

alpine bir Alpine ifadesi alır; çubuğun genişliği ve aria-valuenow bu ifadeyi izler. Değer tarayıcıda değiştiği için sayfa yenilenmez. Bu değer sınıra çekilmez, 0 ile 100 arasında tutmak size kalır.

CANLI ÖRNEK

<div class="space-y-3" x-data="{ yuzde: 30 }">
    <acun:progress alpine="yuzde" label="Aktarım" />
    <div class="flex items-center gap-2">
        <acun:button variant="white" size="sm" x-on:click="yuzde = Math.max(0, yuzde - 10)">−10</acun:button>
        <acun:button variant="white" size="sm" x-on:click="yuzde = Math.min(100, yuzde + 10)">+10</acun:button>
        <span class="text-sm tabular-nums" x-text="yuzde + '%'"></span>
    </div>
</div>

Prop	Değerler
`alpine`	Alpine ifadesi (ör. yuzde, dosya.ilerleme)

Dosya yükleme ilerlemesi

Livewire dosya yüklerken livewire-upload-progress olayını yayar. Olaydaki yüzdeyi bir Alpine değişkenine yazıp alpine ile çubuğa bağlayın.

BLADE

<div x-data="{ yukleme: 0 }"
     x-on:livewire-upload-start="yukleme = 0"
     x-on:livewire-upload-progress="yukleme = $event.detail.progress">
    <input type="file" wire:model="belge">
    <acun:progress alpine="yukleme" label="Belge yükleniyor" class="mt-2" />
</div>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`value`	`null`	0 – 100; sınıra çekilir, tam sayıya çevrilir
`alpine`	`null`	Alpine ifadesi; verilirse value yerine kullanılır
`label`	`null`	Ekran okuyucu etiketi; boşsa "İlerleme"
`size`	`md`	sm · md · lg
`striped`	`false`	Çapraz şeritler
`animated`	`false`	Kayan şeritler (striped'ı da açar)