Multi-état

Le composant Multi-état permet de créer une animation sur un objet ou une partie de l'écran à l'aide de transitions. 

Le composant Multi-état est un composant très flexible. Il vous permet de créer plusieurs états d'un objet ou d'un ensemble d'objets. C'est grâce à ce composant que vous pouvez créer vos éléments UI tels que les boutons (avec effet d'animation), toggle boutons, drop-down... et de nombreuses animations. 

💡 Il est indispensable de maîtriser les transitions et les états liés pour créer des animations grâce au composant Multi-état. Nous vous invitons à consulter cet article au préalable : Transitions.

Editer le composant Multi-état

Cliquez sur  Composants et choisissez le Multi-état. 

Double-cliquez sur la zone du composant pour éditer son contenu. Vous pouvez créer de nouveaux états et naviguer entre vos états depuis la fenêtre de gauche. 

Vous pouvez insérer tout type de contenu dans le composant Multi-états (images, formes, texte et même des composants).

Vous pouvez créer un nombre illimité d'états.

Dans la fenêtre Propriétés, vous pouvez sélectionner un état par défaut : c'est l’état qui sera automatiquement affiché au chargement du composant. Si vous ne définissez rien et que vous retournez sur cet écran, le composant se trouvera sur le dernier état affiché.

Interagir avec le composant Multi-état

Comme n'importe quel composant, il est possible d'utiliser le multi-état comme déclencheur ou d'agir sur ce composant. 

Pour déclencher une action depuis le composant Multi-état, sélectionnez ce composant et ouvrez la fenêtre Actions. En plus des déclencheurs standards (Tape clic, Survol entrant, Touche....), vous pouvez déclencher une action à l'affichage de chaque état. 

Pour créer une action sur ce composant, sélectionnez un déclencheur et l'action Agir sur un composant. Sélectionnez le composant Multi-état et vous avez le choix parmi les actions suivantes : 

  • Aller à un état sélectionné
  • Aller à l'état suivant
  • Aller à l'état précédent

Exemples d'utilisations 

Bouton hover

Créez deux états liés et créez une action de changement d'état au survol entrant et une autre au survol sortant

Toggle

Créez deux états liés et créez une action de changement d'état au clic.

Drop-down

Pop-over

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous