Stepper elementi, uygulama geliştirme süreçlerinde genellikle karmaşık veya uzun iş akışlarını kullanıcı dostu bir şekilde sunmak için kullanılır. Bu element, kullanıcıların belirli adımları sırayla takip ederek bir süreci tamamlamasına yardımcı olur.

Stepper, kullanıcıların sayıları artırıp azaltmalarına yardımcı olan bir grafik kontrol elementidir.

Stepper elementi sadece Web uygulamaları destekleyen elementir.

Stepper Elementini Ekleme

Stepper elementini uygulamanız içerisine eklemeniz oldukça kolay. Stepper elementini eklemek için aşağıdaki adımları izlemeniz gerekmektedir:

UI Design modülünde, sol taraftaki Elements panelini açın.
Elements paneli içerisinde Container kategorisi içerisinden Stepper’i seçin.
Stepper elementini ekrana sürükleyin ve bırakın.
Stepper elementini Properties paneli içerisinden özelleştirebilirsiniz. Örneğin adımların sayısı, başlangıç değeri vb.

Eklenilen Step elementinde Dizayn ortamı içerisinde gezinim sağlanabilirken, uygulama Run edildiğinde gezinim işlemi olmamaktadır.

Stepper Elementi Özellikleri

Stepper elementine tıklayınca sağ tarafta açılan paneldir.

Bu panel içerisinde Stepper1, Step Direction, Authorization (Yetkilendirme), Visibility (Görünürlük) gibi ayarlamaların yapıldığı alanlar bulunmaktadır.

Stepper1: Step düzenlemelerinin yapıldığı alandır. Element içerisinde Step Item’a tıklanınca açılan Title alanından steplerin isimlendirildiği ve +Add Stepper Item alanına tıklayınca daha fazla Step eklenebildiği alandır.

Step Direction: Steplerin yatay (horizontal) veya dikey(vertical) şekilde görüntüleme ayarlarının yapıldığı alandır.

Yetkilendirme (Authorization)

Uygulamanızın ekran ve elementlerinde, "Anonymous Access" ve "All Roles Access" yetkilendirme seçenekleri ile kullanıcı erişimini özelleştirebilirsiniz. "Anonymous Access" herhangi bir hesap bilgisi sorgulaması olmadan erişimi mümkün kılarken, "All Roles Access" ile kullanıcı hesap bilgileri doğrulanarak erişim sağlanır.

Element düzeyinde yetkilendirme için, ilgili elementi seçip Properties panelinden "Authorization" ayarlarını düzenleyerek, uygulamanızın güvenlik ve kullanıcı deneyimini yönetebilirsiniz.

Bu yöntemler, uygulamanızda kişiselleştirilmiş ve güvenli bir ortam yaratmanıza olanak tanır.

Visibility (Görünürlük)

Ekranların veya elementlerin görünürlüğünün ayarlandığı kısımdır. Elementler'de Visibility yani Görünürlük, belirli bir durum ve/veya koşula göre görünürlüğü düzenlemenizi sağlar. Her bir element için her zaman görünür olmasını, gizli olmasını veya bir koşula bağlı olarak görünüp gizlenmesini sağlayabilirsiniz.

Ekranınızın görünürlük yapısının ayarlandığı kısımdır. Kuika, uygulamanızdaki ekranların görünürlük kontrolünü yapabilmeniz için Always Visible, Hidden, Sometimes Visible seçeneklerini sunmaktadır.

Always Visible: Uygulamanızdaki ekranların her zaman görünür olmasını sağlar. ‍
Visible: Uygulamanızdaki ekranların görünür olmasını sağlar. ‍
Hidden: Uygulamanızdaki ekranların gizlenmesini sağlar. ‍
Sometimes Visible: Uygulamanızdaki ekranların koşula bağlı görünür olmasını sağlar.

Elementlerde veya Ekranlarda Visibility İşlemleri

Elementlerde veya ekranınızda Visibility ayarlarını yapmak için aşağıdaki adımları izleyebilirsiniz:

Ekrandaki elemente veya ekrana tıklayarak seçili hale getirin.
Properties panelini açın.
Visibility alanına tıklayarak uygulamanızın ihtiyacına göre aşağıdaki seçimlerden birini yapın.
- Selectbox içerisinden Always visible ile her zaman görünür olmasını sağlarsınız. ‍
- Hidden ile elementi gizleyebilirsiniz.
- ‍Sometimes visible ile ekleyeceğiniz koşullar doğrultusunda görüntülenmesini sağlayabilirsiniz.

Yapmış olduğunuz seçim doğrultusunda elementin görünürlüğü ayarlanmış olacaktır.

Style panel ile arayüz tasarımını özelleştirin

Elementlerinizi Styling Paneli ile özelleştirerek, web ve mobil uygulamalarınızda benzersiz ve etkileyici kullanıcı arayüzleri oluşturabilirsiniz. Bu genel kılavuz, çeşitli elementlerin (örneğin, Collapse) nasıl özelleştirileceğini açıklar ve ortak özelliklerle ilgili detaylı bilgiler sunar.

Altta tanımlanan bölümler element özelinde değişkenlik gösterir. Her bir özelleştirme seçeneği hakkında daha fazla bilgi edinmek için, lütfen ilgili bağlantılara tıklayınız.

Layout (Düzen)‍

Elementlerin boyutlandırılması, hizalanması ve çevresel iç boşlukların (padding) ayarlanması gibi görsel düzenlemeleri buradan yapabilirsiniz. Bu ayarlar, elementin içerisinde bulunan diğer elementlerin düzenini de etkiler. Özellikler arasında Size, Min Size ve Align bulunur; ancak, bazı elementler Display özelliğini desteklemeyebilir.

Text (Metin)‍

Elementin metin özellikleri, yazı tipi ailesi, stil, renk, boyut, aralık ve diğer seçenekler aracılığıyla buradan düzenlenebilir. Bu bölüm, Text ile ilgili tüm ayarlamaları destekler.

Fill (Dolgu)‍

Elementin arka planını renk veya görseller ile kişiselleştirmek için Fill ayarını kullanabilirsiniz. Bu, elementin görsel çekiciliğini artırır.

Border (Kenarlık)‍

Elementlerinize kenarlık ekleyerek ve köşe yarıçaplarını ayarlayarak daha estetik bir görünüm kazandırabilirsiniz.

Shadow (Gölge)‍

Web uygulamalarında kullanılan elementlere gölge efekti ekleyerek derinlik hissi verebilirsiniz. Ancak, bazı elementler mobil uygulamalar için uygun olmadığından gölge özelliği desteklenmeyebilir.

4. Stepper Elementinin Uygulama İçerisinde Örnek Kullanımı

Butona tıklandığında bütün Steplerin bir döngü içerisinde çalıştırıldığı bir örnek inceleyelim.

Stepper elementini Canvas içerisine Elementler panelinden sürükle bırak ile ekleyin.
Eklenen Stepper elementinin altına Elementler panelinden butonu seçip sürükle bırak ile Canvas’a ekleyin.
Eklenilen Step elementinde adımları Step1, Step2, Step3 gibi isimlendirin.
Ardından Butona tıklayınca açılan Properties paneli içerisinde Fixed Value alanından Butonu Run olarak isimlendirin.
Ardından Butona tıklayın. Açılan Properties paneli içerisinden +Add Action → OnClick → UI Control → Set Value Of’a tıklayarak aksiyonu ekleyin.
Oluşturulan aksiyonda Selectbox içerisinden Step1’i seçin.Bu işlemi Step2 ve Step3 için de yaptığımızdan dolayı seçimi üst üste olan üç nokta ikonuna tıklayarak kopyalayıp yapıştırın. İçeriğini Step2 ve sürekli tekrarlaması ve başa dönmesini sağlamak için Step1 olarak güncelleyin.
Ardından uygulamayı çalıştırdığınızda Stepler birbirini takip edecek şekilde çalışacaktır.

5. Stepper Elementinin Öneri Kullanım Yerleri

Stepper elementinin uygulama geliştirme sürecinde birçok şekilde kullanabilirsiniz.

Kayıt ve Hesap Oluşturma: Kullanıcıların bir hesap oluştururken veya kaydolurken belirli adımları takip etmelerini sağlayabilirsiniz. Örneğin, kullanıcının temel bilgilerini girmesi, hesabını doğrulaması ve tercihlerini belirlemesi gibi adımlar olabilir.
Ödeme Süreci: E-ticaret veya ödeme işlemlerinde, kullanıcıların sepetlerini doldurduktan sonra ödeme aşamasını tamamlamaları gerekebilir. Stepper, teslimat adresi girmek, ödeme bilgilerini sağlamak ve siparişi onaylamak gibi adımları göstermek için kullanılabilir.
Form Doldurma: Uygulamanızda uzun ve karmaşık formlar bulunuyorsa, bu formları adım adım doldurmayı kolaylaştırmak için stepper kullanabilirsiniz. Kullanıcılar her adımda gerekli bilgileri girer ve sonunda tüm formu tamamlar.
Anket veya Quiz: Kullanıcıların anketleri veya quizleri tamamlamasını istediğinizde, Stepper elementi her bir soruyu veya adımı temsil edebilir. Kullanıcılar adım adım ilerler ve sonunda tüm soruları yanıtlar.
İş Akışları ve İş Süreçleri: Kurumsal uygulamalarda veya iş akışlarını yöneten araçlarda, belirli iş süreçlerini adım adım takip etmek için Stepper kullanabilirsiniz. Bu, bir projenin farklı aşamalarını veya belgelerin onay süreçlerini içerebilir.
Rezervasyon ve Randevu: Kullanıcıların otel rezervasyonları, doktor randevuları veya etkinlik kayıtları gibi işlemleri tamamlamaları gereken durumlarda Stepper elementi kullanabilirsiniz.
Öğrenme Platformları: Eğitim uygulamalarında, kullanıcıların dersleri adım adım tamamlamasını sağlamak veya bir kursun bölümlerini takip etmelerini kolaylaştırmak için Stepper kullanabilirsiniz.
Yerleştirme Süreçleri: İş başvuruları veya stajyerlik başvuruları gibi süreçlerde, kullanıcıların belirli adımları tamamlamalarını sağlayabilirsiniz.

Stepper elementi, kullanıcı deneyimini geliştirmek ve karmaşık süreçleri daha yönetilebilir hale getirmek için oldukça kullanışlı bir araçtır. Uygulama tasarımınızı ve kullanıcı ihtiyaçlarını dikkate alarak Stepper elementini uygun şekillerde kullanabilirsiniz.