États des éléments

Les éléments interactifs d’un flow changent d’apparence en fonction des actions de l’utilisateur : une option de quiz sélectionnée passe à l’état Selected, un champ de saisie actif passe à l’état Active. Certains états sont conditionnels — par exemple, vous pouvez désactiver un bouton. Stylisez chaque état séparément pour donner un retour visuel aux utilisateurs, sans écrire de code.

États disponibles par type d’élément

Les états Addable n’apparaissent pas par défaut — ouvrez States settings pour les ajouter. Ils sont pilotés par des conditions : vous définissez quand ils s’activent.

Comment styliser un état

1. Sélectionnez un élément. La section States dans le panneau droit liste les états pris en charge par l’élément.
2. Dans la section States, activez l’état cible. Ajoutez l’état Disabled conditionnel si nécessaire.
3. Modifiez n’importe quelle propriété — fond, bordure, typographie, etc. La modification s’applique uniquement à cet état.

Les éléments imbriqués deviennent avec état en même temps que le parent. Toute modification apportée à un enfant est limitée à l’état actif du parent.

4. Le Builder applique le style correspondant à l’exécution.

États des éléments sélectionnables

Les éléments sélectionnables — options de quiz, produits, onglets, bascules d’essai, et tout élément sélectionnable personnalisé — disposent de deux états par défaut :

• Default : l’apparence au repos de l’élément.
• Selected : s’applique lorsque l’utilisateur appuie sur l’élément. Le Builder repasse en Default lorsque l’utilisateur désélectionne l’élément.

Dans un groupe à choix unique, sélectionner un élément désélectionne les autres. Les groupes à choix multiple permettent à plusieurs éléments d’être sélectionnés simultanément. Les bascules sont indépendantes — sélectionner l’une n’a aucun effet sur ses voisines. Voir types de groupes.

États de saisie

• Default : L’apparence au repos de la saisie.
• Active : S’applique lorsque la saisie est en focus.
• Invalid : S’applique lorsque le contenu de la saisie échoue à la validation. Par exemple, lorsqu’un champ e-mail ne contient pas @. Voir Validation des saisies.
• Disabled : La saisie n’est pas interactive. Ajoutez cet état manuellement ; voir État Disabled conditionnel.

Stylisez chaque état de la même façon qu’un élément sélectionnable : activez l’état cible, modifiez les propriétés.

État Désactivé basé sur des conditions

L’état Désactivé empêche l’utilisateur d’interagir avec un élément. Contrairement aux états Default, Selected, Active ou Invalid, l’état Disabled ne s’active pas automatiquement — il nécessite une condition déclencheur définie par l’utilisateur.

Disabled est disponible sur :

• Inputs : Tout champ de saisie — texte, e-mail, mot de passe, nombre, téléphone, date et/ou heure.
• Éléments sélectionnables : Options de quiz, produits, onglets, boutons d’activation d’essai, et tout élément sélectionnable personnalisé.
• Tout élément avec une interaction tactile : Par exemple, un bouton, une image ou une icône qui déclenche une action de navigation.

Ajouter l’état Désactivé

Pour ajouter et configurer un état Désactivé :

1. Sélectionnez l’élément cible.
2. Dans la section States, cliquez sur Settings .
3. Choisissez Add Disabled state. L’état Disabled apparaît dans la section States.
4. À côté du nouvel état Disabled, cliquez sur Edit conditional state .
5. Ajoutez une condition. Si vous souhaitez désactiver le bouton submit tant que la saisie ne passe pas la validation, comparez la variable isValid de l’input à false.
6. Appliquez un style à l’état Disabled pour communiquer visuellement la restriction (par exemple, réduisez l’opacité).

Le SDK d’Adapty évalue la condition au moment de l’exécution et applique l’état Disabled lorsque c’est approprié — aucun code d’application n’est nécessaire.

États des étapes pour les indicateurs de progression

Les indicateurs de progression montrent aux utilisateurs où ils en sont dans un flow d’onboarding. Chaque étape possède trois états :

• Complétée : les étapes que l’utilisateur a déjà franchies.
• Actuelle : l’étape en cours de l’utilisateur.
• À venir : les étapes que l’utilisateur n’a pas encore atteintes.