Element durumları

Etkileşimli flow öğeleri, kullanıcı eylemlerine göre görünümlerini değiştirir: dokunulan bir soru seçeneği Seçili duruma gelir, odaklanan bir giriş alanı Aktif olur. Bazı durumlar koşula bağlıdır — örneğin bir düğmeyi devre dışı bırakabilirsiniz. Kullanıcılara uygulama kodu yazmadan görsel geri bildirim vermek için her durumu ayrı ayrı stilleyin.

Eleman türüne göre kullanılabilir durumlar

Eklenebilir durumlar varsayılan olarak görünmez — eklemek için States settings bölümünü açın. Bu durumlar koşula bağlı: ne zaman etkinleşeceklerini siz tanımlarsınız.

Bir durumu nasıl stillendirirsiniz

1. Bir element seçin. Sağ paneldeki States bölümü, elementin desteklediği durumları listeler.
2. States bölümünde hedef durumu etkinleştirin. Gerekiyorsa koşul tabanlı Disabled durumunu ekleyin.
3. Herhangi bir özelliği değiştirin — dolgu, kenarlık, tipografi vb. Değişiklik yalnızca o duruma uygulanır.

Nested öğeler, ana öğeyle birlikte durumlu hale gelir. Bir alt öğede yapılan her değişiklik, ana öğenin aktif durumuna göre uygulanır.

4. Builder, çalışma zamanında eşleşen stili uygular.

Seçilebilir element durumları

Seçilebilir elementler — quiz seçenekleri, ürünler, sekmeler, toggle’lar ve checkbox’lar ve tüm özel seçilebilir elementler — kutudan çıktığı gibi iki duruma sahiptir:

• Default: Elementin varsayılan görünümü.
• Selected: Kullanıcı elemente dokunduğunda uygulanır. Kullanıcı elementi seçimi kaldırdığında Builder Default durumuna geri döner.

Tek seçimli bir grupta bir öğe seçildiğinde diğerleri otomatik olarak seçimi kaldırılır. Çoklu seçim gruplarında aynı anda birden fazla öğe Seçili olabilir. Toggle’lar bağımsızdır — birini seçmek diğer kardeş öğeleri etkilemez. Bkz. grup türleri.

Giriş durumları

• Varsayılan: Giriş alanının normal görünümü.
• Aktif: Giriş alanı odaklanmışken uygulanır.
• Geçersiz: Giriş alanının içeriği doğrulamayı geçemediğinde uygulanır. Örneğin, bir e-posta alanında @ karakteri bulunmadığında. Bkz. Giriş doğrulama.
• Devre Dışı: Giriş alanı etkileşime kapalıdır. Bu durumu manuel olarak ekleyin; bkz. Koşula dayalı Devre Dışı durumu.

Her durumu, seçilebilir bir öğede olduğu gibi biçimlendirin: hedef durumu etkinleştirin, ardından özellikleri değiştirin.

Koşula Bağlı Devre Dışı Durumu

Devre Dışı durumu, kullanıcının bir öğeyle etkileşim kurmasını engeller. Default, Selected, Active veya Invalid durumlarının aksine, Devre Dışı durumu kendi kendine etkinleşmez; kullanıcı tarafından tanımlanan bir tetikleyici koşul gerektirir.

Devre Dışı durumu şu öğelerde kullanılabilir:

• Girdiler: Herhangi bir giriş alanı — metin, e-posta, şifre, sayı, telefon, tarih ve/veya saat.
• Seçilebilir öğeler: Sınav seçenekleri, ürünler, sekmeler, geçişler ve onay kutuları ve herhangi bir özel seçilebilir öğe.
• Dokunma etkileşimi olan herhangi bir öğe: Örneğin, bir navigasyon eylemini tetikleyen bir düğme, resim veya simge.

Devre dışı durumu ekleme

Devre dışı durumu eklemek ve yapılandırmak için:

1. Hedef öğeyi seçin.
2. States bölümünde Settings seçeneğine tıklayın.
3. Add Disabled state seçeneğini belirleyin. Disabled state, States bölümünde görünür.
4. Yeni Disabled state’in yanındaki Edit conditional state seçeneğine tıklayın.
5. Bir koşul ekleyin. Girdi doğrulamayı geçmediği sürece submit düğmesini devre dışı bırakmak istiyorsanız, girdinin isValid değişkenini false ile karşılaştırın.
6. Kısıtlamayı görsel olarak iletmek için Disabled state’i stilize edin (örneğin, opaklığı düşürün).

Adapty SDK, koşulu çalışma zamanında değerlendirir ve gerektiğinde Disabled durumunu uygular — herhangi bir uygulama kodu gerekmez.

İlerleme göstergeleri için adım durumları

İlerleme göstergeleri, kullanıcıların onboarding flow’unda ne kadar ilerlediklerini gösterir. Her adımın üç durumu vardır:

• Tamamlandı: Kullanıcının geçtiği adımlar.
• Mevcut: Kullanıcının bulunduğu adım.
• Yaklaşan: Kullanıcının henüz ulaşmadığı adımlar.