# Gérer les changements d'orientation

> Découvrez comment utiliser le composant Condition pour détecter les changements d'orientation de l'écran et afficher automatiquement une pop-up en mode paysage. Utilisez PandaSuite pour améliorer l'expérience utilisateur sur mobile et tablette.

https://docs.pandasuite.com/fr/essentials/layout/detect-screen-orientation-changes/

**Découvrez comment utiliser le composant Condition** **pour détecter les changements d'orientation de l'écran et afficher automatiquement une pop-up bloquant l'utilisation de l'application en mode paysage.**

Lorsque l'utilisateur passe son appareil en mode paysage, une pop-up s'affiche pour lui indiquer que l'application est optimisée pour une utilisation en mode portrait uniquement. Cette fonctionnalité est particulièrement utile pour garantir une expérience utilisateur cohérente sur mobile et tablette.

## Étape 1 : ajouter une pop-up

1. Dans votre projet PandaSuite, ajoutez un [composant Pop-up](https://docs.pandasuite.com/fr/essentials/components/pop-up/).
2. Personnalisez son contenu en y insérant un message clair, par exemple : *"Cette application fonctionne uniquement en mode portrait."*
3. Ajustez le design pour qu'il couvre toute la zone visible et empêche l'interaction avec le contenu sous-jacent.

## Étape 2 : ajouter le composant Condition

1. Ajoutez un [composant Condition](https://docs.pandasuite.com/fr/essentials/components/condition/)
2. Renommez ce composant (exemple : *"Condition Orientation"*) pour faciliter son identification.

## Étape 3 : configurer le composant Condition

Créez une nouvelle condition basée sur les dimensions de l'écran :

1. Dans les propriétés du composant Condition, sous **Conditions**, cliquez sur **Ajouter**
2. Définissez la condition de détection de l'orientation : **Largeur > Hauteur** (ceci détecte le passage au mode paysage)

   ○ Données : choisissez les données du projet et sélectionnez la **Largeur** de l'écran actuel.

   ○ Fonction : choisissez **Supérieur à**

   ○ Valeur : choisissez les données du projet et sélectionnez la **Hauteur** de l'écran actuel.

[Image : Fenêtre de condition « Landscape ? » encadrée : cible Project › Context › Screen › Width, greater than Height, évaluation automatique activée]

Pour réagir aussi au mode portrait, ajoutez une seconde condition, **Portrait ?** : cliquez sur la flèche à côté de la **Cible**, choisissez la condition existante **Landscape ?**, puis la fonction **faux**.

[Image : Fenêtre de condition « Portrait ? » encadrée : sa cible est la condition Landscape ?, avec la fonction false, et l'évaluation automatique est activée]

3. Activez l'**Evaluation automatique** pour que la condition soit vérifiée en continu.

## Étape 4 : ajouter les actions à la Condition

Ajoutez une action au composant **Condition** pour ouvrir la pop-up lorsque la condition est remplie :

- Action : **Interagir sur un composant** > **Pop-up** > **Ouvrir la pop-up**

Ajoutez une action à l'inverse de la condition pour fermer la pop-up :

- Action : **Interagir sur un composant** > **Pop-up** > **Fermer la pop-up**

## Étape 5 : tester la configuration

1. Enregistrez votre projet.
2. Testez en changeant l'orientation de votre appareil ou en modifiant la taille de la fenêtre dans le simulateur.
3. Vérifiez que la pop-up s'affiche bien en mode paysage et disparaît en mode portrait.

Félicitations ! Vous avez maintenant mis en place une détection automatique de l'orientation avec le composant **Condition**. Vous pouvez également explorer d'autres cas d'usage en combinant ce composant avec d'autres actions pour améliorer l'expérience utilisateur.

N'hésitez pas à tester et à adapter cette fonctionnalité en fonction de vos besoins spécifiques dans vos projets PandaSuite !