---
title: "Element durumları"
description: "Öğeleri duruma göre biçimlendirin ve çalışma zamanında bir koşul kullanarak bir öğeyi devre dışı bırakın."
---

Etkileşimli flow elemanları, kullanıcı etkileşimlerine göre görünümlerini değiştirir: seçilen bir sınav seçeneği **Seçili**, odaklanan bir giriş alanı **Aktif** görünüm alır. 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.
<div style={{
  maxWidth: '560px',
  margin: '0 auto 2rem',
  position: 'relative',
  aspectRatio: '16/9',
  width: '100%'
}}>
  <iframe
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
    }}
    src="https://www.youtube.com/embed/gdsNfHpKAqQ?si=VY5mqZgH1j0RB6fE"
    title="YouTube video player"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerPolicy="strict-origin-when-cross-origin"
    allowFullScreen
  />
</div>
## Element türüne göre kullanılabilir durumlar \{#available-states-by-element-kind\}

| Element türü | Yerleşik durumlar | Eklenebilir durumlar |
|---|---|---|
| [Seçilebilir elementler](#selectable-element-states) | **Default**, **Selected** | **Disabled** |
| [Girişler](#input-states) | **Default**, **Active**, **Invalid** | **Disabled** |
| [Tap etkileşimi olan herhangi bir element](#condition-driven-disabled-state) — butonlar, görseller, ikonlar, stack'ler vb. | **Default** | **Disabled** |
| [İlerleme göstergesi adımları](#step-states-for-progress-indicators) | **Completed**, **Current**, **Upcoming** | — |
**Eklenebilir** durumlar varsayılan olarak görünmez — eklemek için **States settings** Settings bölümünü açın. Bu durumlar [**koşula bağlı**](#condition-driven-disabled-state): ne zaman etkinleşeceklerini siz tanımlarsınız.
## Bir durumu nasıl stillendirirsiniz \{#how-to-style-a-state\}

1. Bir öğe seçin. Sağ paneldeki **States** bölümü, öğenin desteklediği durumları listeler.
2. **States** bölümünde hedef durumu etkinleştirin. Gerekirse [koşula bağlı Devre Dışı durumunu](#condition-driven-disabled-state) ekleyin.
3. Herhangi bir özelliği değiştirin — dolgu, kenarlık, tipografi, metin içeriği vb. Değişiklik yalnızca o duruma uygulanır.
Yuvalanmış öğeler, üst öğeyle birlikte durumlu hale gelir. Bir alt öğede yapılan herhangi bir değişiklik — renkler, düzenler, metin içeriği — üst öğenin aktif durumuna göre kapsamlandırılır.

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

:::tip
Bir durum, bir metin öğesinin *nasıl* göründüğünü değil, *ne* söylediğini de değiştirebilir. Builder, metin içeriğini dolgu veya kenarlık genişliğiyle aynı kategoride bir özellik olarak ele alır.
:::
## Seçilebilir öğe durumları \{#selectable-element-states\}

Seçilebilir öğeler — sınav seçenekleri, ürünler, sekmeler, deneme süresi geçiş düğmeleri ve herhangi bir [özel seçilebilir öğe](flow-selectable-elements#make-an-element-selectable) — kutudan çıkar çıkmaz iki duruma sahiptir:

- **Varsayılan**: Öğenin dinlenme görünümü.
- **Seçili**: Kullanıcı öğeye dokunduğunda uygulanır. Kullanıcı öğenin seçimini kaldırdığında Builder, Varsayılan duruma geri döner.
Tek seçimli bir grupta, bir öğeyi seçmek diğerlerinin seçimini kaldırır. Çok seçimli gruplar aynı anda birden fazla öğenin Seçili olmasına izin verir. Toggle'lar birbirinden bağımsızdır — birini seçmek diğerlerini etkilemez. Bkz. [grup türleri](flow-selectable-elements#group-types).

:::tip
Birkaç öğe için aynı durumu stillemek mi istiyorsunuz (örneğin, test seçenekleri)? Önce bir öğeyi stilleyin, ardından kopyalayın. Durum stillendirmesi kardeş öğeler arasında aktarılmaz — şu anlık geçici çözüm bu.
:::
## Giriş durumları \{#input-states\}

- **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](builder-inputs-and-forms#input-validation).
- **Devre Dışı**: Giriş alanı etkileşime kapalıdır. Bu durumu manuel olarak ekleyin; bkz. [Koşula dayalı Devre Dışı durumu](#condition-driven-disabled-state).

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 \{#condition-driven-disabled-state\}

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:
- **Girişler**: Herhangi bir [giriş alanı](builder-inputs-and-forms) — metin, e-posta, şifre, sayı, telefon, tarih ve/veya saat.
- **Seçilebilir öğeler**: Quiz seçenekleri, ürünler, sekmeler, deneme süresi geçişleri ve herhangi bir [özel seçilebilir öğe](flow-selectable-elements#make-an-element-selectable).
- **Dokunma etkileşimi olan herhangi bir öğe**: Örneğin, bir gezinme eylemi tetikleyen bir düğme, resim veya simge.
### Devre dışı durumu ekleme \{#add-the-disabled-state\}

Devre dışı durumu eklemek ve yapılandırmak için:
1. Hedef öğeyi seçin.
2. **States** bölümünde **Settings** 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** 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ı \{#step-states-for-progress-indicators\}

:::link
Ana makale: [İlerleme göstergeleri](builder-loaders-and-progress-bars#step-states)
:::

İ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.