Kuika’nın Stepper elementi, adım adım ilerleyen süreçleri kullanıcıya net, düzenli ve takip edilebilir bir şekilde sunmak için kullanılan bir UI elementidir. Kullanıcılar, her adımı sırasıyla tamamlayarak sürecin bir sonraki aşamasına geçer ve hangi adımda olduklarını görsel olarak kolayca takip edebilir.
Stepper elementi, web ve mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Çok adımlı kayıt ve üyelik süreçleri
Başvuru ve talep formları (izin talebi, kredi başvurusu, destek talebi vb.)
Sipariş ve ödeme akışları (adres → ödeme → onay)
Kullanıcı onboarding süreçleri
Kimlik doğrulama ve belge yükleme adımları
Ayar ve konfigürasyon sihirbazları (wizard yapıları)
Aktif, tamamlanmış ve pasif adımları görsel olarak ayırt eder.
Kullanıcının mevcut adımını net şekilde gösterir.
Adımlar arasında ileri ve geri geçiş desteği sağlar.
Her adımda farklı validasyon ve kontrol mekanizmaları uygulanabilir.
Sürecin tamamlanma durumunu kullanıcıya sezgisel biçimde gösterir.
Hem web hem mobil uygulamalarda tutarlı ve responsive bir deneyim sunar.
2.1. Stepper Elementi Özellikleri
Properties panelinde aşağıdaki ayarlar yapılabilir:
Stepper1: Step düzenlemelerinin yapıldığı alandır. Step Item’a tıklayarak Title alanında adımları isimlendirebilir, +Add Stepper Item ile yeni adımlar ekleyebilirsiniz.
Step Direction: Adımların yatay (Horizontal) veya dikey (Vertical) şekilde görüntülenmesi bu alandan ayarlanabilir.
Unfinished Step Color: Henüz tamamlanmamış adımların (step'lerin) rengini belirler.
Active Step Color: Kullanıcının şu an bulunduğu (aktif) adımın rengini tanımlar.
2.2. Stepper Elementi Örnek Kullanımı
Bu örnekte, bir butona tıklandığında adımların bir döngü içinde çalışması sağlanacaktır.
Adım 1: Stepper Elementini Ekleyin
Elements panelinden Stepper elementini sürükleyip bırakın.
Adım 2: Butonu Ekleyin
Elements panelinden Button elementini sürükleyip bırakın.
Adım 3: Stepper Adımlarını İsimlendirin
Stepper elementindeki adımları sırasıyla Step1, Step2, Step3 olarak adlandırın.
Adım 4: Butonu İsimlendirin
Eklediğiniz butonu seçin.
Properties panelinde Fixed Value alanına "Run" yazın.
Adım 5: Aksiyonları Ekleyin
Butona tıkladığınızda açılan Properties panelinde +Add Action seçeneğine tıklayın.
OnClick → UI Control → Set Value Of seçeneğini seçin.
Açılan pencerede Select Box içinden Step1 seçin.
Adım 6: Diğer Adımları Ekleyin
Aynı aksiyonu Step2 ve Step3 için de uygulayın.
İşlemi hızlandırmak için üç nokta ikonuna tıklayarak aksiyonu kopyalayabilir ve yapıştırabilirsiniz.
Adım 7: Adımların Döngüsel Olmasını Sağlayın
Tüm adımlar tamamlandıktan sonra tekrar Step1’e dönmesi için son aksiyonda Step1’i seçin.
Adım 8: Uygulamayı Çalıştırın
Uygulamayı çalıştırın. Butona her tıklamada adımlar sırayla çalışacak ve döngü tamamlandığında tekrar Step1’e dönecektir.
Bu kılavuzu takip ederek Stepper elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.
2.3. Stepper Elementine Eklenebilen Aksiyonlar
Stepper elementi, kullanıcı adım değişikliklerini takip etmek için onChange tetikleyicisini destekler. Kullanıcı bir adımdan diğerine geçtiğinde bu tetikleyici çalışır.
onChange: Kullanıcı aktif adımı değiştirdiğinde (ileri veya geri geçişlerde) tetiklenir.
Kullanım senaryoları:
Bir sonraki adıma geçmeden önce validasyon çalıştırmak
Adıma özel veri yüklemek veya güncellemek
Form verilerini geçici olarak kaydetmek
Belirli adımlarda butonları aktif / pasif hale getirmek
Adım değiştiğinde backend aksiyonları tetiklemek
Kullanıcının hangi adımda olduğunu loglamak veya izlemek
Önemli Notlar:
Stepper elementi kendi başına veri kaydetmez; yalnızca adım geçişlerini bildirir.
Kritik işlemler (Save, Submit vb.) mutlaka onChange tetikleyicisi veya adım içindeki buton aksiyonları ile kontrol edilmelidir.
onChange, hem ileri hem de geri adım geçişlerinde çalışır; bu nedenle aksiyon içinde mevcut adım bilgisine göre kontrol yapılması önerilir.
Stepper elementi, bu yapısıyla çok adımlı süreçlerde kontrollü ve güvenli bir akış yönetimi sağlar.
3. Stepper Elementi Nasıl Kullanılır?
Bu bölümde Stepper elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Master Screen Menü Yapısı (Yan Menü – Hiyerarşik Navigasyon)
Bir iş yönetimi veya muhasebe uygulamasında, yüksek hacimli sipariş verilerinin kullanıcıya düzenli ve performanslı şekilde sunulabilmesi için Sipariş Listesi ekranında sayfalama (pagination) yapısı kullanılır. Bu yapı, kullanıcıların veriler arasında kolayca gezinmesini ve aradıkları kayda hızlıca ulaşmasını sağlar.
Senaryoda:
Siparişler, sipariş tarihine göre en güncel kayıt en üstte olacak şekilde Tabloda listelenir.
Ekranda aynı anda sınırlı sayıda kayıt gösterilir ve her sayfa belirli sayıda siparişi içerir.
Kullanıcı, sayfa numaraları veya ileri–geri okları aracılığıyla sayfalar arasında geçiş yapabilir.
Sayfa başına gösterilecek kayıt sayısı kullanıcı tarafından seçilebilir.
“Go to page” alanı ile istenilen sayfaya doğrudan geçiş yapılabilir.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“UserRegistration” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
FullName: Kullanıcının ad ve soyad bilgisinin birlikte girildiği metin alanıdır.
Email: Kullanıcıya ait geçerli e-posta adresinin girildiği ve iletişim amaçlı kullanılan alandır.
Phone: Kullanıcının iletişim için kullanılacak telefon numarasının girildiği alandır.
City: Kullanıcının bulunduğu şehir bilgisinin seçildiği veya girildiği alandır.
CreatedAt: Kaydın sistem üzerinde oluşturulduğu tarih ve saat bilgisini tutar.
Adım 2 - Element Ekleme ve Ayarlamaları
UI Design modülünü açın.
Sayfaya Elements > Interactive > Stepper aksiyonunu sürükleyip bırakın.
İsteğe bağlı olarak aktif, bekleyen ve tamamlanmış aşama renkleri istediğiniz şekilde ayarlayabilirsiniz. Mevcut senaryoda tamamlanmış alanın rengini Stepper > Properties > FinishedStepColor > Hex > 62FF00 olarak yeşil tonunda ayarlanmıştır.
Stepper konumu default Horizontal (yatay) olarak kullanımıştır. Kullanıma bağlı Vertical (dikey) hale getirilebilir.
Stepper elementi seçiliyken ilk aşamaya tıklayın ve Properties > StepItem > Title > “Temel Bilgiler” olarak güncelleyin.
Benzer şekilde ikinci aşamaya ilerleyin ve Properties > StepItem > Title > “İletişim Bilgileri” olarak güncelleyin.
Son alanın aşamanın başlığını “Onay ve Kaydet” olarak güncelleyin.
İlk aşama Temel Bilgiler’e tıklayın ve içerisindeki Step Item alanına Elements > Container > Row elementine iki kez tıklayıp ekleyin.
Sırasıyla Row elementi içerisindeki sütun sayısını Row > Properties > Desktop alınan bir ve iki olacak şekilde aşağıdaki gibi ayarlayın.
İlk ve son aşamalarda en alt Row tek sütun kullanılabilir. Sütunlar içerisine button elementi eklenecektir.
İlk sütun içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.
Vertical Stack elementini Vertical Stack > Style > Layout > Align > Sola Hizalı olarak ayarlayın.
Benzer şekilde İletişim Bilgileri aşamasına tıklayın ve içeriği oluşturun.
Fark olarak Email elementi yerine Text Input elementi kullanın ve soldaki boş sütun içerisine Elements > Container > Button elementini sürükleyip bırakın.
Onayla ve Kaydet aşamasına tıklayın ve içerisine iki Elements > Container > Row elementini sürükleyip bırakın.
İlk Column içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın ve Styling > Layout alanından yatayda hizalayın. Vertical Stack içerisine alt alta görünecek şekilde dört yeni Elements > Container > HorizontalStack ekleyin.
Horizontal Stack içerisine iki adet Elements > Display > Label elementi ekleyin.
Label elementlerine Horizontal Stack içerisine eklendiğinde default gelen 100 px genişlik tanımını Label > Styling > Layout > Width silin ve boş bırakın.
Default 100 px tanımlaması stack elementleri içerisine eklendiğinde oluşur. Diğer durumlarda alan boş gelir.
Benzer işlemleri kalan üç Horizontal Stack içerisinde de uygulayın.
Aşağıdaki iki sütunu Col > Styling > Layout > Align soldakini sola sağdakini sağa hizalayın ve dikeyde ortalayın. İçerisine Elements > Navigation > Button elementini ekleyin. Buton yazılarını aşağıdaki gibi tanımlayın.
Sol taraftaki Label içerisindeki yazıları aşağıdaki şekilde güncelleyin.
Adım 3 - Aksiyon Ayarlamaları
Onay ve Kaydet aşamasında Ad Soyad alanındaki Label elementine son durumu göstermek için TextInput1 > Add Action > onBlur > UIControl > Set Value Of aksiyonunu ekleyin.
Aksiyon parametrelerini bağlamadan önce ilgili elementin adını kontrol edin örneğin ad soyad karşısındaki Label6 elementine karşılık geliyor. Karmaşayı önlemek için önceden element isimlerini alanlara göre güncelleyebilirsiniz.
Set Value Of parametrelerini Onay ve Kaydet aşamasında yazılacak ilgili element adına bağlayın ve value > TextInput1 (Ad Soyad) olarak tanımlayın.
Benzer şekilde kalan diğer alanlardaki Input elementlerine de Add Action > onBlur > UIControl > Set Value Of aksiyonunu ekleyin, onay ve kaydet aşamasındaki yazılacak elementin adını seçin ve ilgili input elementini value olarak tanımlayın.
Aşamalar arasında ileri yapabilmek için Button elementlerine Button > Add Action > onClick > UIControl > Set Value Of aksiyonunu ekleyin. Component > Stepper1 ve ilk alandan diğerine ilerlemek için Step to Select > İletişim Bilgileri olarak tanımlayın.
Kalan ileri ve geri butonlarına da benzer mantıkta aşamaları seçerek işlemleri uygulayın.
Son aşamada Onayla buttonu içerisine Button > Add Action > onClick > Managed DB > Save Record aksiyonunu ekleyin ve tüm sütun alanlarını seçin.
Text Input ve Email element girdilerini sırasıyla ilgili alanlara Components > … > value şeklinde tanımlayın. Farklı olarak CreatedAt > Default > Now ve Id > Default > New Guid tanımlamalarını yapın.
Son olarak işlem onaylanıp kaydedildikten sonra istediğiniz sayfaya erişmek için onayla butonuna Add Action > onClick > Navigation > Navigate aksiyonunu ekleyin ve gidilecek sayfayı seçin.
Preview
Uygulama test edildiğinde, kullanıcıdan bilgi toplama sürecinin Stepper yapısı ile adım adım ve kontrollü şekilde ilerlediği görülür. Temel Bilgiler, İletişim Bilgileri ve Onay ve Kaydet adımları, yalnızca İleri / Geri butonları ile değil, stepper başlıklarına tıklanarak da aktif hale getirilebilir. Bu sayede kullanıcı, ilgili adımlar arasında esnek bir şekilde geçiş yaparak bilgilerini güncelleyebilir. Aktif ve tamamlanan adımlar görsel olarak vurgulanarak sürecin durumu net biçimde gösterilir.
Son adımda girilen bilgiler özet halinde sunulur ve Onayla butonu ile kayıt işlemi tamamlanır. Kayıt işlemi başarıyla tamamlandığında, oluşturulan kullanıcı bilgileri liste ekranında görüntülenir. Böylece kullanıcı, hem kayıt sürecinin sorunsuz şekilde tamamlandığını görür hem de eklenen kaydın sistemde aktif olarak yer aldığını doğrulayabilir.
4. Ortak Özellikler (Properties)
Stepper elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
