İlerleme göstergeleri ve yükleyiciler
Progress kategorisi iki element türü sunar: çok ekranlı bir flow’da adım tabanlı ilerleme için bir tür ve yerinde meşgul göstergeleri için bir tür.
İlerleme göstergeleri
Gösterge stilleri
Progress öğesi, kullanıcının çok ekranlı bir flow içindeki konumunu gösterir. Bu kategori üç görsel varyant sunar:
- Linear — Kullanıcı ilerledikçe dolan tek bir çubuk.
- Segmented — Her adım için ayrı ayrı dolan çubuklar.
- Connectors — Çizgilerle birbirine bağlı etiketli daireler (örneğin sırayla Adım 1, Adım 2, Adım 3).
Adımları ekranlarla eşleştirme
Varsayılan olarak İlerleme Göstergesi, flow’daki tüm ekranları izler. Bunu belirli bir alt kümeyle sınırlamak için Screens açılır menüsünden seçim yapın. Alternatif olarak, dışarıda bırakmak istediğiniz ekranı açıp Include screen in progress indicator onay kutusunun işaretini kaldırın.
Adım sayısı üzerinde daha ayrıntılı kontrol gerekiyorsa One segment per screen geçişini kapatın.
Adım pozisyonu, kullanıcının gerçekte gördüğü sırayı değil, ekran listesini takip eder. Doğrusal olmayan flow’larda göstergenin görüntülenen adımı ileri atlayabilir ya da geri dönebilir.
Adım durumları
Her adımın üç durumu vardır — Completed, Current ve Upcoming. Bir durumun stilini sağ panelde düzenlemek için Progress Indicator içindeki bir adımı seçin. Düzenlemelerinizi diğer iki duruma kopyalamak için Apply changes to all states seçeneğini kullanın.
Bir adımı düzenlemek, aynı göstergedeki tüm adımları etkiler.
Düzen ve konumlandırma
İlerleme göstergesi global bir öğedir; bu nedenle onu bir kapsayıcının içine yerleştiremezsiniz. Konumunu da ayarlayamazsınız — varsayılan olarak mutlak konumlandırma kullanır. Kullanıcı ekranı kaydırdığında gösterge yerinde kalır ve içerik onun altında kayar.
Göstergenin etrafındaki boşluğu ayarlamak için öğeyi taşımak yerine Spacing bölümündeki Margin ve Padding kontrollerini kullanın. Düzen bozuk görünüyorsa hem göstergede hem de komşu öğede margin veya padding’i ayarlayın.
Yükleyiciler
Yükleyici, bir işlemin sürdüğünü bildiren animasyonlu bir öğedir; örneğin kullanıcının quiz yanıtlarının kişiselleştirilmiş bir plan hazırlamak üzere işlenmesi gibi.
Kategoride üç şablon bulunur:
- Spinner — Dönen dairesel bir simge.
- Spinner with label — Açıklamalı dönen dairesel bir simge (örneğin, “Yükleniyor…”).
- Loader — İşlem ilerledikçe dolup biten yatay bir çubuk.
Bir yükleyicinin görünmesi ve kaybolması için bir tetikleyici gerekir. Bu mantığı ayarlamak için Interactions sekmesini açın — örneğin, kullanıcı bir quiz gönderdikten sonra gösterin.