Skip to main content
Komponen Steps merupakan Komponen Premium pada halaman kustom.

1. Kasus penggunaan

Komponen Steps pada halaman kustom cocok untuk membangun formulir seperti entri informasi personel yang ditugaskan dan Daftar informasi Masuk, serta dapat mengingatkan pengguna mengenai Progres pengisian informasi Dasar.
Untuk Atribut Komponen, cara penggunaan, dan contoh, silakan klik di sini.
Demo Steps

2. Atribut Komponen dasar

Pengaturan Atribut Komponen Steps

2.1 Atribut langkah saat ini

Nilai bertipe Angka yang mengontrol status Data pada langkah aktif. Jika status semua Data langkah adalah Default, langkah saat ini menampilkan status sedang berjalan, langkah sebelumnya menampilkan Selesai, dan langkah berikutnya menampilkan status menunggu. Atribut langkah saat ini

2.2 Atribut Tipe

Tipe Komponen Steps meliputi cricle (lingkaran), arrow, dan dot. Ketiga gaya ditampilkan seperti di bawah ini. Gaya Atribut Tipe Steps

2.3 Arah tampilan

Arah tampilan Komponen Steps dapat diatur menjadi horizontal atau vertikal. Namun, Tipe arrow tidak mendukung gaya vertikal. Gaya Atribut arah tampilan Steps

2.4 Atribut perataan Konten

Atribut perataan Konten hanya didukung oleh Tipe cricle. Tipe arrow dan dot tidak mendukung Atribut ini, sehingga tidak akan muncul saat kedua Tipe tersebut dipilih. Gaya Atribut perataan Konten Steps

2.5 Mode Hanya Baca

Secara Default, mode Hanya Baca Dinonaktifkan sehingga node langkah dapat diklik untuk menjalankan Tindakan Kustom yang diatur pada node tersebut. Ketika mode Hanya Baca Aktif, node langkah tidak dapat diklik dan Tindakan Kustom tidak akan dipicu. Mengatur Tindakan Kustom untuk sebuah node: Tindakan Kustom Steps
Kode berikut dapat langsung disalin ke panel JS.

3. Konfigurasi Komponen Premium

3.1 Format Data

3.2 Mengatur Data langkah secara dinamis

Ikat Data langkah Komponen Steps ke Sumber Data variabel, seret Komponen Tombol, lalu atur Tindakan kliknya. Saat diklik, ubah nilai dalam Sumber Data variabel untuk memperbarui Data langkah secara dinamis. Ikat Sumber Data variabel Atur Tindakan Komponen Tombol
Kode berikut dapat langsung disalin ke panel JS.

3.3 Contoh tipikal

Atur Sumber Data variabel dengan nilai Default 0. Ikat Sumber Data variabel tersebut ke Atribut langkah saat ini pada Komponen Steps. Ikat Sumber Data variabel

3.3.1 Persiapan

(1) Atur identifier unik Komponen kontainer, tempatkan Komponen yang Data-nya perlu diisi di dalam Komponen kontainer, lalu kontrol visibilitas Komponen yang akan diisi pada langkah Berikutnya berdasarkan status tampil/sembunyi Komponen kontainer.
Atur identifier unik Komponen kontainer
(2) Atur teks Tips, ikon, dan gaya untuk Kirim Berhasil/Gagal. Di sini, Sumber Data variabel digunakan untuk mengontrol visibilitas Komponen kontainer.
Atur Sumber Data untuk mengontrol visibilitas kontainer Kontainer block_3 diikat ke Sumber Data variabel
(3) Ikat Tindakan ke Komponen Tombol. Tombol Berikutnya, Kirim Ulang, dan Kirim berbagi Tindakan onclick yang sama.
Ikat Tindakan ke Komponen Tombol
(4) Atur Tindakan klik Kustom onclick2 pada node langkah.
Steps terikat Tindakan + demo efek
Kode berikut dapat langsung disalin ke panel JS. Catatan: Identifier unik Komponen perlu Diganti.