Stepper

Penunjuk posisi pada proses bertahap: permintaan pickup, pendaftaran klien, atau form panjang yang dipecah.

Dasar

Berikan langkah-langkahnya dan langkah yang sedang dikerjakan. Yang sudah dilewati bercentang, yang sedang dikerjakan bernada warna, dan yang di depan tinggal bernomor.

Stepper hanya menunjukkan posisi. Isi tiap langkah tetap milik halaman, seperti halnya Tabs yang tidak ikut mengurus isi panelnya.

  1. LokasiSelesai
  2. MaterialSelesai
  3. JadwalLangkah sekarang
  4. TinjauBelum dikerjakan

Form bertahap

v-model dikendalikan tombol Lanjut dan Kembali milik halaman. Dengan navigable="done", langkah yang sudah diisi menjadi tombol sungguhan sehingga orang bisa kembali memperbaikinya — sementara langkah di depan tidak bisa dilompati, karena isinya belum tentu sah.

  1. LokasiAlamat penjemputanLangkah sekarang
  2. MaterialJenis dan perkiraanBelum dikerjakan
  3. JadwalTanggal dan jamBelum dikerjakan
  4. TinjauPeriksa lalu kirimBelum dikerjakan
Isi langkah Lokasi di sini. Isinya tetap milik halaman; Stepper hanya menunjukkan posisinya.

Vertikal

Susunan vertikal memberi ruang untuk deskripsi tiap langkah, dan tetap terbaca di layar sempit. Untuk kejadian yang sudah terjadi — riwayat, jejak status — pakai Timeline; Stepper adalah langkah yang masih harus diselesaikan.

  1. Unggah dokumenIzin pengangkutan dan manifestSelesai
  2. Verifikasi tim W4CDicek satu hari kerjaSelesai
  3. Tanda tangan kontrakLewat tanda tangan elektronikLangkah sekarang
  4. Layanan aktifJadwal pertama dikirim otomatisBelum dikerjakan

API

Props

PropTipeDefaultKeterangan
itemsW4cStepperItem[][]Langkah-langkahnya, dari yang pertama.
v-modelstring | number0Langkah yang sedang dikerjakan: value miliknya, atau indeksnya bila langkah tidak memakai value.
orientation'horizontal' | 'vertical''horizontal'vertical untuk langkah berdeskripsi panjang atau panel sempit.
size'sm' | 'md''md'sm untuk panel samping dan kartu.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Nada penanda langkah selesai dan langkah sekarang.
countersbooleantrueNomor di dalam penanda langkah yang belum selesai. Langkah selesai selalu bercentang.
navigable'none' | 'done' | 'all''none'Langkah mana yang boleh dituju. done adalah yang lazim: orang bisa kembali ke yang sudah diisi, tidak melompat ke depan.
labelstring'Langkah'Nama daftarnya, dibacakan sebelum langkah-langkahnya.
doneLabel / currentLabel / upcomingLabelstring'Selesai' / 'Langkah sekarang' / 'Belum dikerjakan'Status tiap langkah yang dibacakan pembaca layar, karena penandanya sendiri hiasan.

W4cStepperItem

FieldTipeDefaultKeterangan
labelstring—Nama langkah.
descriptionstring—Baris kecil di bawah nama langkah.
iconstring—Nama ikon Iconify di dalam penanda, menggantikan nomor langkahnya.
valuestring | number—Kunci langkah, sekaligus nilai yang dibawa v-model.
disabledbooleanfalseLangkah tetap terlihat tetapi tidak bisa dituju.

Slots

SlotTipeDefaultKeterangan
item{ item, index, state }—Mengganti nama dan deskripsi satu langkah. state bernilai done, current, atau upcoming; penanda dan garisnya tetap milik komponen.

Event select membawa value dan indeks langkah yang dipilih. Daftarnya digambar sebagai <ol> dengan aria-current="step" pada langkah sekarang, dan status tiap langkah ditulis sebagai teks tersembunyi — penanda bercentang dan garisnya hiasan.