Özel seçenekler
Radio ya da checkbox'ı başlık, açıklama ve ikon içeren tıklanabilir bir karta dönüştürür. Az sayıda ve açıklama gerektiren seçenekler için uygundur.
Tekli seçim
Varsayılan tür radio'dur. Aynı gruptaki kartlara aynı name'i, her birine farklı bir value verin; başlangıçta seçili olanı checked ile işaretleyin. Kartın tamamı tıklanabilir ve seçili kart vurgulanır.
<div class="grid gap-3 md:grid-cols-3">
<acun:option-card name="fatura_donemi" value="aylik" title="Aylık" description="Her ay yenilenir" />
<acun:option-card name="fatura_donemi" value="yillik" title="Yıllık" description="İki ay ücretsiz" checked />
<acun:option-card name="fatura_donemi" value="omur_boyu" title="Ömür boyu" description="Tek seferlik ödeme" />
</div>| Prop | Değerler |
|---|---|
type | radio | checkbox |
name | Grup adı |
value | Gönderilen değer |
checked | Başlangıçta seçili |
İkonlu
icon ile başlığın sağına bir acun:icon eklenir. İkon gri başlar, kart seçilince marka rengine döner. Seçenekler arasındaki farkı ilk bakışta anlatmak için kullanın.
<div class="grid gap-3 md:grid-cols-3">
<acun:option-card name="kargo_turu" value="standart" title="Standart kargo" description="2–4 iş günü içinde teslimat" icon="truck" checked />
<acun:option-card name="kargo_turu" value="ekspres" title="Ekspres kargo" description="Ertesi gün kapınızda" icon="bolt" />
<acun:option-card name="kargo_turu" value="magaza" title="Mağazadan al" description="Size en yakın şubeden alın" icon="building-storefront" />
</div>| Prop | Değerler |
|---|---|
icon | acun:icon adı |
Çoklu seçim
type="checkbox" ile birden fazla kart seçilebilir. Klasik formda değerlerin dizi olarak gönderilmesi için adın sonuna [] ekleyin.
<div class="grid gap-3 md:grid-cols-2">
<acun:option-card type="checkbox" name="bildirim[]" value="sms" title="SMS" description="Kargo durumu güncellemeleri" checked />
<acun:option-card type="checkbox" name="bildirim[]" value="eposta" title="E-posta" description="Aylık özet" />
</div>| Prop | Değerler |
|---|---|
type | checkbox |
Zengin açıklama
description verilmezse kartın içine yazdığınız içerik açıklama olarak gösterilir. Tutar gibi vurgulanması gereken kısımlar için bunu kullanın.
<div class="grid gap-3 md:grid-cols-2">
<acun:option-card name="plan" value="baslangic" title="Başlangıç" checked>
Aylık <strong class="text-gray-900 dark:text-zinc-100">1.250 ₺</strong>, 5 kullanıcıya kadar
</acun:option-card>
<acun:option-card name="plan" value="profesyonel" title="Profesyonel">
Aylık <strong class="text-gray-900 dark:text-zinc-100">2.000 ₺</strong> ve öncelikli destek
</acun:option-card>
</div>| Prop | Değerler |
|---|---|
description | Düz metin açıklama |
(slot) | description yokken gösterilen içerik |
Pasif seçenek
disabled niteliği içteki alana geçer; kart soluklaşır ve seçilemez. Şu an kullanılamayan ama var olduğunu göstermek istediğiniz seçenekler için uygundur.
<div class="grid gap-3 md:grid-cols-2">
<acun:option-card name="odeme" value="kart" title="Kredi kartı" description="Tek çekim ya da taksitli" checked />
<acun:option-card name="odeme" value="kapida" title="Kapıda ödeme" description="Bu bölgede kullanılamıyor" disabled />
</div>| Prop | Değerler |
|---|---|
disabled | Seçilemez ve soluk görünür |
Livewire ile
Yalnızca wire:model verirseniz grup adı ve kartların kimlikleri bu özellikten üretilir. Checkbox kartları bir dizi özelliğe bağlanır.
@foreach (['standart' => 'Standart kargo', 'ekspres' => 'Ekspres kargo', 'magaza' => 'Mağazadan al'] as $deger => $baslik)
<acun:option-card wire:model.live="kargoTuru" :value="$deger" :title="$baslik" />
@endforeach
<acun:option-card type="checkbox" wire:model="kanallar" value="sms" title="SMS" />| Prop | Değerler |
|---|---|
wire:model | Radio: tek değer · checkbox: dizi |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
title | — | Kart başlığı (zorunlu) |
description | null | Başlığın altındaki açıklama; yoksa slot içeriği |
type | radio | radio · checkbox |
name | null | Grup adı; yoksa wire:model değeri |
value | null | Seçildiğinde gönderilen değer |
checked | false | Başlangıçta seçili |
icon | null | Başlığın sağındaki acun:icon adı; kart seçilince marka renginde |