Adımlar · Armada

Yatay

Telefonda etiketler gizlenir, altında "Adım 2 / 4" özeti çıkar.

Hesap E-posta ve şifre
2 Profil Ad ve fotoğraf
3 Ekip Davetler
4 Tamamla

Adım 2 / 4 · Profil

Kodu göster

<armada:stepper :current="1" :steps="[
    ['label' => 'Hesap', 'description' => 'E-posta ve şifre'],
    ['label' => 'Profil', 'description' => 'Ad ve fotoğraf'],
    ['label' => 'Ekip', 'description' => 'Davetler'],
    ['label' => 'Tamamla'],
]" />

Dikey ve hatalı adım

Sipariş alındı 10 Ekim 14:02
Ödeme onaylandı 10 Ekim 14:03
Kargoya verilemedi Adres doğrulanamadı
4 Teslim edildi

Kodu göster

<armada:stepper vertical :current="2" :steps="[
    ['label' => 'Sipariş alındı', 'description' => '10 Ekim 14:02'],
    ['label' => 'Ödeme onaylandı', 'description' => '10 Ekim 14:03'],
    ['label' => 'Kargoya verilemedi', 'description' => 'Adres doğrulanamadı', 'error' => true],
    ['label' => 'Teslim edildi'],
]" />

Butonlarla adım değiştirme (Alpine)

1 Sepet
2 Teslimat
3 Ödeme

Adım 1 / 3 · Sepet

Sepet
2 Teslimat
3 Ödeme

Adım 2 / 3 · Teslimat

Sepet
Teslimat
3 Ödeme

Adım 3 / 3 · Ödeme

Kodu göster

<div x-data="{ step: 0 }" class="sc-col">
    <div x-show="step === 0"><armada:stepper :current="0" :steps="['Sepet', 'Teslimat', 'Ödeme']" /></div>
    <div x-show="step === 1" x-cloak><armada:stepper :current="1" :steps="['Sepet', 'Teslimat', 'Ödeme']" /></div>
    <div x-show="step === 2" x-cloak><armada:stepper :current="2" :steps="['Sepet', 'Teslimat', 'Ödeme']" /></div>
    <div class="sc-row">
        <armada:button icon="arrow-left" x-on:click="step = Math.max(0, step - 1)">Geri</armada:button>
        <armada:button variant="solid" tone="primary" icon-trailing="arrow-right" x-on:click="step = Math.min(2, step + 1)">İleri</armada:button>
    </div>
</div>

Özellikler

<armada:stepper>

Prop	Varsayılan	Not
`steps`	`[]`	['Hesap', 'Profil'] or [['label' => 'Hesap', 'description' => '…', 'error' => false], …]
`current`	`0`	zero-based index of the active step
`vertical`	`false`