Estados de los elementos

Los elementos interactivos de un flow cambian de apariencia según las acciones del usuario: una opción de quiz al pulsarla pasa a estado Selected, un campo de texto al enfocarlo pasa a estado Active. Algunos estados dependen de condiciones; por ejemplo, puedes deshabilitar un botón. Aplica estilos distintos a cada estado para dar feedback visual al usuario sin necesidad de código.

Estados disponibles por tipo de elemento

Los estados Addable no aparecen por defecto — abre States settings para añadirlos. Son controlados por condición: tú defines cuándo se activan.

Cómo aplicar estilos a un estado

1. Selecciona un elemento. La sección States del panel derecho muestra los estados que admite ese elemento.
2. En la sección States, activa el estado deseado. Añade el estado Disabled basado en condiciones si es necesario.
3. Cambia cualquier propiedad — relleno, borde, tipografía, etc. El cambio quedará limitado a ese estado.

Nested elements become stateful alongside the parent. Any change to a child is scoped to the parent’s active state.

4. El Builder aplica el estilo correspondiente en tiempo de ejecución.

Estados de los elementos seleccionables

Los elementos seleccionables — opciones de quiz, productos, pestañas, toggles y checkboxes, y cualquier elemento seleccionable personalizado — tienen dos estados por defecto:

• Default: La apariencia en reposo del elemento.
• Selected: Se aplica cuando el usuario pulsa el elemento. El Builder vuelve a Default cuando el usuario deselecciona el elemento.

En un grupo de selección única, elegir un elemento deselecciona los demás. Los grupos de selección múltiple permiten que varios estén seleccionados al mismo tiempo. Los toggles son independientes: seleccionar uno no afecta a sus hermanos. Consulta los tipos de grupo.

Estados del input

• Default: El aspecto predeterminado del input en reposo.
• Active: Se aplica mientras el input está enfocado.
• Invalid: Se aplica cuando el contenido del input no supera la validación. Por ejemplo, cuando un campo de email no contiene @. Consulta Validación de inputs.
• Disabled: El input no es interactivo. Añade este estado manualmente; consulta Estado Disabled por condición.

Estiliza cada estado igual que un elemento seleccionable: activa el estado objetivo y cambia las propiedades.

Estado Desactivado basado en condiciones

El estado Desactivado impide que el usuario interactúe con un elemento. A diferencia de Default, Selected, Active o Invalid, el estado Disabled no se activa por sí solo — requiere una condición definida por el usuario.

Disabled está disponible en:

• Entradas: Cualquier campo de entrada — texto, email, contraseña, número, teléfono, fecha y/o hora.
• Elementos seleccionables: Opciones de quiz, productos, pestañas, interruptores y casillas de verificación, y cualquier elemento seleccionable personalizado.
• Cualquier elemento con interacción táctil: Por ejemplo, un botón, imagen o icono que desencadene una acción de navegación.

Añadir el estado Disabled

Para añadir y configurar un estado Disabled:

1. Selecciona el elemento de destino.
2. En la sección States, haz clic en Settings .
3. Elige Add Disabled state. El estado Disabled aparece en la sección States.
4. Junto al nuevo estado Disabled, haz clic en Edit conditional state .
5. Añade una condición. Si quieres desactivar el botón submit a menos que el input supere la validación, compara la variable isValid del input con false.
6. Dale estilo al estado Disabled para comunicar visualmente la restricción (por ejemplo, reduce la opacidad).

El SDK de Adapty evalúa la condición en tiempo de ejecución y aplica el estado Disabled cuando corresponde, sin necesidad de código adicional en la app.

Estados de paso para indicadores de progreso

Los indicadores de progreso muestran a los usuarios hasta dónde han llegado en un flow de onboarding. Cada paso tiene tres estados:

• Completado: Los pasos que el usuario ya ha superado.
• Actual: El paso en el que se encuentra el usuario en ese momento.
• Próximo: Los pasos a los que el usuario aún no ha llegado.