États des éléments

Les éléments interactifs d’un flow changent d’apparence selon les actions de l’utilisateur : une option de quiz appuyée devient Selected, un champ de saisie actif devient Active. Certains états sont pilotés par des conditions — 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 dans l’application.

États disponibles selon le type d’élément

Les états Ajoutables 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 de droite liste les états pris en charge par cet élément.

2. Dans la section States, activez l’état cible. Ajoutez l’état Disabled piloté par condition si nécessaire.

3. Modifiez n’importe quelle propriété — remplissage, bordure, typographie, etc. La modification est limitée à cet état.

   Les éléments imbriqués deviennent eux aussi 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 au moment de 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 revient à 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 Selected en même temps. Les bascules sont indépendantes — en sélectionner une n’affecte pas ses voisines. Voir types de groupes.

États des inputs

• Default : L’apparence au repos du champ de saisie.
• Active : S’applique pendant que le champ est actif.
• Invalid : S’applique lorsque le contenu du champ ne passe pas la validation. Par exemple, quand un champ e-mail ne contient pas @. Voir Validation des inputs.
• Disabled : Le champ n’est pas interactif. Ajoutez cet état manuellement ; voir État Disabled piloté par condition.

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 Disabled piloté par condition

L’état Disabled empêche l’utilisateur d’interagir avec un élément. Contrairement à Default, Selected, Active ou Invalid, l’état Disabled ne s’active pas tout seul — 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, bascules 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 Disabled

Pour ajouter et configurer un état Disabled :

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 le champ ne passe pas la validation, comparez la variable isValid du champ à false.
6. Stylisez l’état Disabled pour communiquer visuellement la restriction (par exemple, réduisez l’opacité).

Le SDK Adapty évalue la condition au moment de l’exécution et applique l’état Disabled le cas échéant — aucun code dans l’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 dispose de trois états :

• Completed : Les étapes que l’utilisateur a déjà franchies.
• Current : L’étape en cours de l’utilisateur.
• Upcoming : Les étapes que l’utilisateur n’a pas encore atteintes.