Form sihirbazı

71 · Formlar

Uzun bir formu adımlara böler. Adımlar üstte listelenir; tamamlanan adımlar onay işaretiyle gösterilir ve tıklanarak geri dönülebilir, sonraki adımlara ise yalnızca düğmelerle geçilir.

PRO acun:stepper

Temel kullanım

steps anahtar => başlık dizisidir. Her adımın içeriğini aynı anahtarı taşıyan bir acun:stepper.step içine yazın. Sihirbazın içindeki düğmeler next(), previous(), isFirst ve isLast Alpine değerlerini kullanır.

CANLI ÖRNEK

<acun:stepper :steps="['proje' => 'Proje', 'ekip' => 'Ekip', 'onay' => 'Onay']">
    <acun:stepper.step name="proje" class="grid gap-4 md:grid-cols-2">
        <acun:input name="t_ad" label="Proje adı" />
        <acun:select name="t_plan" label="Plan" :options="['1' => 'Başlangıç', '2' => 'Profesyonel']" />
    </acun:stepper.step>
    <acun:stepper.step name="ekip" class="grid gap-4 md:grid-cols-2">
        <acun:input name="t_kisi" label="Kişi sayısı" type="number" />
        <acun:input name="t_tel" label="Telefon" />
    </acun:stepper.step>
    <acun:stepper.step name="onay">
        <acun:alert variant="success">Bilgiler hazır. Kaydet'e basınca proje oluşturulur.</acun:alert>
    </acun:stepper.step>

    <div class="mt-6 flex justify-between">
        <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Geri</acun:button>
        <acun:button x-show="! isLast" x-on:click="next()">İleri</acun:button>
        <acun:button x-show="isLast" x-cloak variant="success" x-on:click="$dispatch('toast', { type: 'success', message: 'Proje kaydedildi.' })">Kaydet</acun:button>
    </div>
</acun:stepper>

Prop	Değerler
`steps`	anahtar => başlık
`acun:stepper.step name`	steps içindeki anahtar
`next() · previous()`	Sonraki / önceki adıma geçer
`isFirst · isLast`	İlk / son adımda true

Açıklamalı adımlar

Başlığın altına kısa bir açıklama eklemek için adımı dizi olarak verin: ['title' => …, 'description' => …]. Açıklama adımda ne yapılacağını önceden gösterir.

CANLI ÖRNEK

<acun:stepper :steps="[
    'proje' => ['title' => 'Proje', 'description' => 'Temel bilgiler'],
    'ekip' => ['title' => 'Ekip', 'description' => 'Ekip üyeleri'],
    'onay' => ['title' => 'Onay', 'description' => 'Kontrol et ve kaydet'],
]">
    <acun:stepper.step name="proje"><acun:input name="a_ad" label="Proje adı" /></acun:stepper.step>
    <acun:stepper.step name="ekip"><acun:input name="a_kisi" label="Kişi sayısı" type="number" /></acun:stepper.step>
    <acun:stepper.step name="onay"><p class="text-sm text-gray-600 dark:text-zinc-400">Bilgileri kontrol edip kaydedin.</p></acun:stepper.step>

    <div class="mt-6 flex justify-between">
        <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Geri</acun:button>
        <acun:button x-on:click="next()" x-bind:disabled="isLast">İleri</acun:button>
    </div>
</acun:stepper>

Prop	Değerler
`title`	Adım başlığı
`description`	Başlığın altındaki kısa açıklama

İkonlu

variant="icons" ile numara yerine her adımın icon değeri gösterilir. Bu türde tamamlanan adımlarda da ikon kalır; onay işareti yalnızca numaralı türde çıkar.

CANLI ÖRNEK

<acun:stepper variant="icons" :steps="[
    'hesap' => ['title' => 'Hesap', 'icon' => 'user'],
    'guvenlik' => ['title' => 'Güvenlik', 'icon' => 'lock-closed'],
    'bildirim' => ['title' => 'Bildirimler', 'icon' => 'bell'],
]">
    <acun:stepper.step name="hesap"><acun:input name="i_ad" label="Ad soyad" /></acun:stepper.step>
    <acun:stepper.step name="guvenlik"><acun:input name="i_sifre" type="password" label="Şifre" viewable /></acun:stepper.step>
    <acun:stepper.step name="bildirim"><acun:switch name="i_sms" label="SMS bildirimleri" checked /></acun:stepper.step>

    <div class="mt-6 flex justify-between">
        <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Geri</acun:button>
        <acun:button x-on:click="next()" x-bind:disabled="isLast">İleri</acun:button>
    </div>
</acun:stepper>

Prop	Değerler
`variant`	numbered \| icons
`icon`	acun:icon adı

Başlangıç adımı

current sihirbazın hangi adımda açılacağını belirler; önceki adımlar tamamlanmış sayılır. Yarım kalan bir kaydı devam ettirirken kullanın. index (0'dan başlar) ve steps ile ilerleme metni yazabilirsiniz.

CANLI ÖRNEK

<acun:stepper current="ekip" :steps="['proje' => 'Proje', 'ekip' => 'Ekip', 'onay' => 'Onay']">
    <acun:stepper.step name="proje"><acun:input name="b_ad" label="Proje adı" value="Mobil uygulama" /></acun:stepper.step>
    <acun:stepper.step name="ekip"><acun:input name="b_kisi" label="Kişi sayısı" type="number" /></acun:stepper.step>
    <acun:stepper.step name="onay"><p class="text-sm text-gray-600 dark:text-zinc-400">Bilgileri kontrol edip kaydedin.</p></acun:stepper.step>

    <div class="mt-6 flex items-center justify-between">
        <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Geri</acun:button>
        <span class="text-sm text-gray-500 dark:text-zinc-400">Adım <span x-text="index + 1"></span> / <span x-text="steps.length"></span></span>
        <acun:button x-on:click="next()" x-bind:disabled="isLast">İleri</acun:button>
    </div>
</acun:stepper>

Prop	Değerler
`current`	Açılıştaki adımın anahtarı
`index · steps`	Geçerli sıra ve adım anahtarları

Livewire ile

Sihirbazı bir formun içine alın ve son adımdaki düğmeyi type="submit" yapın. Adımlar yalnızca gizlenir, sayfadan çıkarılmaz; bütün adımlardaki alanlar aynı formdadır ve Kaydet'te birlikte doğrulanır. Gizli bir adımdaki hata ancak o adıma dönülünce görünür.

BLADE

<form wire:submit="kaydet">
    <acun:stepper :steps="['proje' => 'Proje', 'ekip' => 'Ekip', 'onay' => 'Onay']">
        <acun:stepper.step name="proje"><acun:input wire:model="ad" label="Proje adı" required /></acun:stepper.step>
        <acun:stepper.step name="ekip"><acun:input wire:model="kisiSayisi" label="Kişi sayısı" type="number" /></acun:stepper.step>
        <acun:stepper.step name="onay">…</acun:stepper.step>

        <div class="mt-6 flex justify-between">
            <acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Geri</acun:button>
            <acun:button x-show="! isLast" x-on:click="next()">İleri</acun:button>
            <acun:button x-show="isLast" x-cloak type="submit">Kaydet</acun:button>
        </div>
    </acun:stepper>
</form>

Prop	Değerler
`type="submit"`	Son adımda formu gönderir

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`steps`	`[]`	anahtar => başlık ya da anahtar => ['title', 'description', 'icon']
`current`	`null`	Açılıştaki adımın anahtarı; boşsa ilk adım
`variant`	`numbered`	numbered · icons
`step: name`	—	Adımın anahtarı (zorunlu); steps ile aynı
`Alpine: step`	—	Geçerli adımın anahtarı
`Alpine: index, steps`	—	Geçerli sıra (0'dan) ve adım anahtarları
`Alpine: next(), previous()`	—	Sonraki / önceki adıma geçer
`Alpine: goTo(anahtar)`	—	Yalnızca geçerli ya da önceki bir adıma döner
`Alpine: isFirst, isLast`	—	İlk / son adımda true

Slot'lar: acun:stepper: acun:stepper.step öğeleri ve düğmeler. acun:stepper.step: adımın içeriği; class gibi nitelikler adımın kapsayıcısına eklenir.