---
title: "元素状态"
description: "按状态设置元素样式，并使用条件在运行时禁用元素。"
---

交互式流程元素会根据用户操作改变外观：被点击的测验选项变为 **Selected**（已选中），获得焦点的输入框变为 **Active**（激活）。某些状态由条件驱动——例如，你可以**禁用**一个按钮。为每个状态单独设置样式，即可在无需编写应用代码的情况下向用户提供视觉反馈。
<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>
## 各元素类型的可用状态 \{#available-states-by-element-kind\}

| 元素类型 | 内置状态 | 可添加状态 |
|---|---|---|
| [可选元素](#selectable-element-states) | **Default**、**Selected** | **Disabled** |
| [输入框](#input-states) | **Default**、**Active**、**Invalid** | **Disabled** |
| [任何带有点击交互的元素](#condition-driven-disabled-state)——按钮、图片、图标、堆叠容器等 | **Default** | **Disabled** |
| [进度指示器步骤](#step-states-for-progress-indicators) | **Completed**、**Current**、**Upcoming** | — |
**可添加**状态默认不显示——打开 **States settings** Settings 即可添加。它们是[**条件驱动**](#condition-driven-disabled-state)的：由你定义触发条件。
## 如何为状态设置样式 \{#how-to-style-a-state\}

1. 选中一个元素。右侧面板中的 **States** 部分会列出该元素支持的所有状态。
2. 在 **States** 部分，激活目标状态。如需要，添加[条件驱动的 Disabled 状态](#condition-driven-disabled-state)。
3. 修改任意属性——填充色、边框、字体排版、文本内容等。该更改仅作用于当前状态。
嵌套元素会随父元素一起变为有状态的。对子元素的任何更改——颜色、布局、文本内容——都属于父元素当前激活状态的作用范围。

4. 付费墙编辑工具在运行时应用匹配的样式。

:::tip
状态不仅能改变文本元素的*外观*，还能改变它显示的*内容*。付费墙编辑工具将文本内容视为一种属性，与填充色或边框宽度属于同一类别。
:::
## 可选元素状态 \{#selectable-element-states\}

可选元素——测验选项、产品、标签页、试用开关以及任何[自定义可选元素](flow-selectable-elements#make-an-element-selectable)——开箱即带有两种状态：

- **Default**：元素的默认外观。
- **Selected**：用户点击元素时生效。用户取消选中后，编辑工具恢复为 Default 状态。
在单选组中，选中一个元素会自动取消其他元素的选中状态。多选组允许同时选中多个元素。切换开关相互独立——选中其中一个不会影响其他同级元素。请参阅[组类型](flow-selectable-elements#group-types)。

:::tip
需要为多个元素（例如测验选项）设置相同状态的样式？先为一个元素设置好样式，然后复制它。状态样式不会在同级元素之间共享——目前复制是唯一的解决方法。
:::
## 输入框状态 \{#input-states\}

- **Default**：输入框的默认外观。
- **Active**：输入框获得焦点时生效。
- **Invalid**：输入框内容未通过验证时生效。例如，邮箱字段中不包含 `@`。请参阅[输入框验证](builder-inputs-and-forms#input-validation)。
- **Disabled**：输入框不可交互。需手动添加此状态，请参阅[条件驱动的禁用状态](#condition-driven-disabled-state)。

每种状态的样式设置方式与可选元素相同：激活目标状态，然后修改属性。
## 条件驱动的禁用状态 \{#condition-driven-disabled-state\}

禁用状态会阻止用户与元素进行交互。与默认、已选中、活跃或无效状态不同，禁用状态不会自动激活——它需要用户自定义的触发条件。

禁用状态适用于：
- **输入项**：任意[输入字段](builder-inputs-and-forms)——文本、邮箱、密码、数字、电话、日期和/或时间。
- **可选元素**：问卷选项、产品、标签页、试用开关，以及任意[自定义可选元素](flow-selectable-elements#make-an-element-selectable)。
- **带点击交互的任意元素**：例如触发导航操作的按钮、图片或图标。
### 添加禁用状态 \{#add-the-disabled-state\}

要添加和配置禁用状态：
1. 选择目标元素。
2. 在 **States** 部分，点击 **Settings** Settings。
3. 选择 **Add Disabled state**。Disabled 状态将出现在 **States** 部分。
4. 在新的 Disabled 状态旁边，点击 **Edit conditional state** Edit conditional state。
5. 添加条件。如果您希望在输入未通过验证时禁用 **submit** 按钮，可将输入的 `isValid` 变量与 `false` 进行比较。
6. 为 Disabled 状态设置样式，以直观地传达限制信息（例如，降低透明度）。
{ }

Adapty SDK 会在运行时评估该条件，并在适当时应用禁用状态——无需任何应用代码。
## 进度指示器的步骤状态 \{#step-states-for-progress-indicators\}

:::link
主要文章：[进度指示器](builder-loaders-and-progress-bars#step-states)
:::

进度指示器向用户展示他们在用户引导流程中的进展情况。每个步骤有三种状态：

- **已完成**：用户已经经过的步骤。
- **当前**：用户当前所在的步骤。
- **即将到来**：用户尚未到达的步骤。