# Multi-état

> Apprenez à gérer des animations individuelles ou groupées avec le composant multi-état. Idéal pour des effets interactifs, cet article détaille son utilisation pour des animations visuelles.

https://docs.pandasuite.com/fr/essentials/components/multi-state/

**Le composant** **Multi-État** **permet de gérer des animations sur des objets individuels ou des ensembles d'objets.**

Il est idéal pour créer des effets interactifs tels que [des boutons](https://docs.pandasuite.com/fr/essentials/interactions/buttons/) avec différents états (normal, survol, cliqué), des effets d'apparition ou de transformation d'éléments visuels. Pour des animations plus globales qui affectent l’ensemble de l’écran, il est préférable d’utiliser les états d’écran ou les avant-plans.

[Vidéo : sur une photo du K2, un clic sur le bouton + du sommet fait apparaître la bulle « The second highest »]

Dans l'exemple ci-dessus, le composant Multi-état comprend 2 états :

- Un premier état dans lequel le contenu de la bulle est présente, mais non visible (opacité à 0%),
- Et un deuxième état lié au premier dans lequel ce contenu devient visible (opacité à 100%). C'est au clic sur le bouton que le multi-état passe d'un état à un autre.

> **Info**
>
> 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](https://docs.pandasuite.com/fr/essentials/interactions/transitions/).

## Cas d’utilisation

- **Boutons interactifs** : créez des boutons avec des états visuels différents (normal, survolé, cliqué).
- **Effets d'apparition/disparition** : animez des objets pour les faire apparaître ou disparaître en douceur.
- **Transitions d’éléments** : gérez des changements de forme, de taille ou de couleur d’un objet.
- **Variations locales dans une interface** : une carte qui se retourne, un panneau qui bascule entre « vide » et « rempli », une section qui passe de « aperçu » à « détails » sans toucher au reste de l'écran.

## Mise en place du composant

### Insertion du composant

- Cliquez sur **Composants** et choisissez le **Multi-état.**
- Placez le composant à l'endroit de votre choix.
- Double-cliquez sur la zone du composant pour éditer le contenu : un premier état est automatiquement créé.
- Vous pouvez insérer tout type de contenu à l'intérieur : images, formes, texte et même des composants.

Vous pouvez également utiliser l'option **Convertir en Multi-État** disponible via le menu de l’application (Mise en page > Convertir en Multi-état) pour transformer un groupe d’éléments existants en un composant Multi-État.

[Image : Menu Mise en page de PandaSuite Studio ouvert sur Convertir en Multi-état, avec un groupe sélectionné dans la liste des objets]

### Ajout de nouveaux états

> **Info**
>
> Pour créer des effets d'apparition et de transition, il est nécessaire de
> créer de nouveaux états. Si vous souhaitez une transition entre deux états,
> ceux-ci doivent être liés.

Pour ajouter un nouvel état :

- Vous devez être à l'intérieur de ce composant
- Rendez-vous dans la zone d'édition du composant, à gauche de l'écran.
- Cliquez sur le bouton + pour ajouter un nouvel état lié et sur la flèche déroulante, pour choisir entre un nouvel état lié ou indépendant.

[Image : Panneau des états d'un Multi-état : le bouton + avec sa flèche, et les états 1. closed et 2. open, lié au premier]

Vous pouvez créer un nombre illimité d'états et naviguer entre vos états depuis la fenêtre de gauche.

## Caractéristiques du composant

### État par défaut

Dans les propriétés, vous pouvez sélectionner un état par défaut, c'est-à-dire l’état qui sera automatiquement affiché au chargement du composant.

Si vous ne définissez rien et que l'utilisateur retourne sur cet écran, le composant se trouvera sur le dernier état affiché.

### Événements déclencheurs

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. C'est ainsi que vous pouvez changer automatiquement l'état sans action de l'utilisateur.

### Actions interactives

Pour agir sur ce composant, sélectionnez un déclencheur (par exemple un bouton) et sélectionnez l'action **Agir sur un composant**.

Sélectionnez le composant **Multi-état** et vous avez le choix parmi les actions suivantes :

- **Sélectionner un état** : sélectionnez un état dans la liste
- **État suivant** : vous avez la possibilité de définir un intervalle et d'activer le **Mode boucle**
- **État précédent** : vous avez la possibilité de définir un intervalle et d'activer le **Mode boucle**
- **État aléatoire**

[Image : Fenêtre Action du bouton du menu : au tap, État suivant sur le Multi-état, avec un intervalle de 1 et la boucle activée]

## Bonnes pratiques

Nous vous recommandons de bien renommer chaque état.

### Gardez les comportements indépendants sur des Multi-états distincts

Un Multi-état affiche toujours un seul état courant, et cet état est l'instantané complet d'un moment : passer à un état applique d'un coup tout ce qui y est enregistré. C'est ce qui permet d'animer plusieurs propriétés à la fois, mais cela signifie aussi qu'un même Multi-état ne peut représenter qu'une seule chose à la fois.

Lorsqu'un même élément doit refléter deux comportements qui évoluent indépendamment, un seul Multi-état ne suffit pas. Prenez une barre d'onglets : chaque onglet a un aspect actif ou inactif qui change à chaque navigation, et un onglet peut aussi afficher une pastille de notification qui dépend de vos données. Si un seul Multi-état gère les deux, changer d'onglet remet chaque onglet sur son aspect inactif et la pastille disparaît avec lui, car le composant ne peut afficher qu'un seul état à la fois et l'état inactif ne porte pas la pastille.

Donnez à chaque comportement son propre Multi-état, afin que chacun conserve son état courant :

- un Multi-état pour l'aspect actif ou inactif, piloté par la navigation ;
- un Multi-état distinct pour la pastille, piloté par vos données (par exemple avec un composant [Condition](https://docs.pandasuite.com/fr/essentials/components/condition/) ou un [binding](https://docs.pandasuite.com/fr/essentials/data/data-binding/)).

Changer d'onglet ne touche jamais à la pastille, et mettre à jour la pastille ne change jamais l'aspect actif.

Lorsque le second élément se pose **sur** le premier, comme la pastille placée sur l'onglet, imbriquez son Multi-état dans l'onglet. Quand le parent change d'état, il ré-applique la position, la taille et l'apparence aux objets qu'il partage entre ses états, mais il ne réinitialise pas un Multi-état imbriqué : la pastille conserve son propre état pendant que l'onglet se déplace ou change d'apparence autour d'elle. Pour cela, gardez la pastille comme **le même objet partagé** entre les états du parent (utilisez des [états liés](https://docs.pandasuite.com/fr/essentials/interactions/understand-states/)) plutôt qu'une copie distincte dans chaque état.

## Exemples pratiques

### Bouton hover

[Vidéo : le bouton « START PLAYING » passe du jaune pâle à l'orange quand le curseur le survole]

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

[Vidéo : un clic fait basculer le toggle du gris au vert, puis un second clic le ramène au gris]

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

### Drop-down

[Vidéo : un clic sur « Choose your language » déroule la liste French, English, Italian et Japanese, puis le survol surligne French]

### Pop-over

[Vidéo : sur la carte PARIS MAP, un clic sur Eiffel Tower puis sur Arc de Triomphe affiche un repère numéroté et le monument]