Yıldız puanı
Yıldızlarla puan vermeyi ya da mevcut bir puanı göstermeyi sağlar. Düz bir formda name ile, Livewire'da wire:model, Alpine'de x-model ile kullanılır; salt okunur modda yalnızca gösterim yapar.
Temel kullanım
Yıldızların üzerine gelince önizleme görünür, tıklayınca puan seçilir. value başlangıç puanıdır; label puanın neyle ilgili olduğunu ekran okuyucuya söyler.
<acun:rating :value="3" label="Sipariş memnuniyeti" />| Prop | Değerler |
|---|---|
value | Başlangıç puanı (tam sayı) |
label | Ekran okuyucu adı; varsayılan "Puan" |
Salt okunur
readonly tıklanamayan bir gösterim çizer; ekran okuyucu puanı "4 / 5" biçiminde okur. Kesirli puanlarda yalnızca tam yıldızlar dolar.
<div class="flex items-center gap-3">
<acun:rating :value="4" readonly />
<span class="text-sm text-gray-600 dark:text-zinc-400">4,0 · 128 değerlendirme</span>
</div>| Prop | Değerler |
|---|---|
readonly | true | false |
Boyutlar
size yıldızların boyutunu belirler; varsayılan md. Tablo satırlarında sm, ürün ya da hizmet başlıklarında lg uygundur.
<div class="flex flex-wrap items-center gap-8">
<acun:rating :value="4" readonly size="sm" />
<acun:rating :value="4" readonly />
<acun:rating :value="4" readonly size="lg" />
</div>| Prop | Değerler |
|---|---|
size | sm | md | lg |
Yıldız sayısı
max gösterilen yıldız sayısını belirler; varsayılan 5.
<acun:rating :value="7" :max="10" readonly />| Prop | Değerler |
|---|---|
max | Yıldız sayısı |
Form içinde
name verildiğinde bileşen seçili puanı gizli bir alanla formla birlikte gönderir; puan seçilmemişse (0) alan boş gider. Salt okunur modda gizli alan eklenmez.
<form method="POST" action="{{ route('siparisler.degerlendir', $siparis) }}">
@csrf
<acun:rating name="puan" :value="old('puan', 0)" label="Sipariş memnuniyeti" />
<acun:button type="submit" size="sm" class="mt-4">Gönder</acun:button>
</form>| Prop | Değerler |
|---|---|
name | Form alanının adı |
Alpine ile
x-model seçilen puanı bir Alpine değişkenine bağlar; değişken dışarıdan değişirse yıldızlar da güncellenir.
<div x-data="{ puan: 3 }" class="flex items-center gap-3">
<acun:rating x-model="puan" label="Sipariş memnuniyeti" />
<span class="text-sm text-gray-600 dark:text-zinc-400">Seçilen: <span x-text="puan"></span> / 5</span>
</div>| Prop | Değerler |
|---|---|
x-model | Alpine değişkeni |
Livewire ile
wire:model ile seçilen puan Livewire özelliğine yazılır; .live eklenirse her tıklamada sunucuya gider. Puan, özelliğin adıyla bir gizli alanda da tutulur ve tıklamada change olayı yayınlanır; böylece acun:form dirty-check ve acun:form-actions değişikliği görür.
<acun:rating wire:model.live="puan" label="Sipariş memnuniyeti" />| Prop | Değerler |
|---|---|
wire:model | Livewire özelliği |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
value | 0 | Başlangıç puanı |
max | 5 | Yıldız sayısı |
readonly | false | Salt okunur gösterim |
size | md | sm · md · lg |
label | null | Ekran okuyucu adı; varsayılan "Puan", salt okunurda "değer / max" |
name | null | Düz formlar için alan adı; puan gizli bir alanla gönderilir (salt okunurda yok) |