İlerleme göstergeleri ve yükleyiciler
Progress kategorisi iki element türü sunar — biri çok ekranlı bir flow’da adım bazlı ilerleme için, diğeri yerinde meşgul göstergeler için.
İ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.
Loader’lar için kullanılabilen tek eylem tetikleyicisi On Screen Appear’dır. Kullanıcılar bir öğeye dokunduğunda loader göstermek için loader’ın Visibility ayarını Hide olarak belirleyin. Ardından, loader’ı tetiklemesi gereken öğeyi seçin ve On Tap ile çalışan bir Show element eylemi ekleyin.
Bir yükleyicinin Duration ayarı, dolum veya dönme animasyonunun süresini kontrol eder; ekranın ne kadar süre görünür kalacağını değil. On screen appear tetikleyicisi ile birlikte kullanılan Navigate to screen eylemi, yükleyiciyi beklemeden anında ilerler. Yükleme ekranını en fazla 5 saniye tutmak için ilgili eylemin ekran geçişine bir Delay ekleyin. Daha uzun bir bekleme için, bir sonraki ekrana geçişi tetikleyen On timer end tetikleyicisine sahip bir Timer ekleyin. Zamanlayıcı süresi tam saniye cinsinden ayarlanır.
Görünürlük ayarını zamanlayıcıda Show olarak bırakın; böylece On timer end tetikleyicisi çalışır. Zamanlayıcıyı gözden uzak tutmak için metnini tamamen şeffaf yapın ya da arka plan rengiyle aynı renge getirin.