Stepper
Stepper elementi ile tanışın.
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.
1.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:
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.
2.Properties Paneli
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.
Stepper elementi için yetkilendirme seçeneklerini kullanabilirsiniz.
Elementlerde Authorization ekleme işlemlerini detaylı incelemek için tıklayın.
Kullanıcı rollerine göre veya ekran rollerine göre Authorization işlemlerini detaylı incelemek için tıklayın.
Elementler de visibility yani görünürlük, belirli bir durumda görünürlük veya erişilebilirliğini düzenlemenizi sağlar. Elementin görünür olduğunu kontrol etmek için kullanılan bir özelliktir. Bu özellik genellikle uygulama tasarımında veya işlevselliğinde kullanılır.
Stepper elementi 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 visibility seçeneklerini kullanabilirsiniz.
Elementlerde Visibility ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Seçimler doğrultusunda Stepper görünürlüğü ayarlanmış olacaktır.
3.Styling Paneli
Step elementinde Styling panelinde yalnızca Layout alanı bulunmaktadır.
Stepper elementinde Layout ile çevresel iç boşluklar (Padding) ve boyutlandırma (Size) gibi görsel düzenlemeleri yapabilirsiniz.
Elementlerde Layout ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
4.Step 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.
Last updated
