Checkbox
Tekli, grup, belirsiz durum ve kart görünümü.
Form
VCheckbox
4 örnek
Tekli
Etiket ve açıklama.
Kodu göster
blade
<div class="sc-col">
<armada:checkbox name="terms" label="Kullanım koşullarını kabul ediyorum" />
<armada:checkbox name="news" label="Bülten" description="Ayda bir e-posta, istediğin an çıkabilirsin." checked />
<armada:checkbox label="Devre dışı" disabled />
</div>
Grup
Hepsini seç (belirsiz durum) ile.
Kodu göster
blade
<div x-data="{ all: ['read'], opts: ['read', 'write', 'delete'] }">
<armada:checkbox.group label="İzinler" description="Bu rol için izinleri seçin.">
<label class="arm-check">
<input type="checkbox" class="arm-checkbox" x-bind:checked="all.length === opts.length" x-effect="$el.indeterminate = all.length > 0 && all.length < opts.length"
x-on:change="all = $el.checked ? [...opts] : []">
<span class="arm-check__text"><span class="arm-check__label">Tümünü seç</span></span>
</label>
<div class="arm-choice-group" style="padding-inline-start:28px">
<armada:checkbox x-model="all" value="read" label="Okuma" />
<armada:checkbox x-model="all" value="write" label="Yazma" />
<armada:checkbox x-model="all" value="delete" label="Silme" />
</div>
</armada:checkbox.group>
</div>
Yatay grup
Kodu göster
blade
<armada:checkbox.group label="Günler" horizontal>
@foreach (['Pzt', 'Sal', 'Çar', 'Per', 'Cum'] as $d)
<armada:checkbox name="days[]" :value="$d" :label="$d" :checked="in_array($d, ['Pzt', 'Çar'])" />
@endforeach
</armada:checkbox.group>
Kart görünümü
Kodu göster
blade
<armada:checkbox.group label="Eklentiler" variant="cards">
<armada:checkbox card name="addons[]" value="backup" icon="database-backup" label="Günlük yedek" description="+₺49 / ay" checked />
<armada:checkbox card name="addons[]" value="ssl" icon="shield-check" label="Gelişmiş SSL" description="+₺29 / ay" />
<armada:checkbox card name="addons[]" value="cdn" icon="globe" label="CDN" description="+₺99 / ay" />
</armada:checkbox.group>
Özellikler
<armada:checkbox>
| Prop | Varsayılan |
|---|---|
label |
null |
description |
null |
name |
null |
value |
null |
checked |
false |
indeterminate |
false |
card |
false |
icon |
null |
<armada:checkbox.group>
Değerler: default | cards
| Prop | Varsayılan | Not |
|---|---|---|
label |
null |
|
description |
null |
|
name |
null |
|
variant |
'default' |
|
horizontal |
false |