Skip to main content
Verify the version tags to ensure you are consuming the intended content or, complete the latest version.

Interface utilisateur adaptative

Comportement adaptatif

 

Le comportement adaptatif offre une expérience utilisateur optimale des éléments dans une vue, quelle que soit la taille de l’écran : cela minimise le défilement horizontal et maximise la présentation des données dans l’espace d’affichage disponible. Par exemple, lorsqu’un utilisateur passe du mode paysage au mode portrait sur une tablette, l’interface utilisateur s’adapte et l’écran rétrécit de manière dynamique.

responsive-behavior-gif

Les options de comportement adaptatif incluent la présentation du formulaire et l’importance des colonnes dans les tableaux.

Tip: Des personnalisations avancées du comportement adaptatif, telles que la configuration de points d'arrêt personnalisés et la modification de l’importance des colonnes, sont effectuées dans Dev Studio.

Points d'arrêt adaptatifs

Un point d'arrêt définit une largeur d’affichage. Les points d'arrêt adaptatifs de Pega sont définis automatiquement par défaut. Lorsque la largeur d’affichage passe par un point d'arrêt, le comportement adaptatif est appliqué à la mise en page. Avec une dynamic layout, le comportement des points d'arrêt adaptatifs modifie la mise en page des champs en fonction de la largeur de la zone d’affichage. 

Par exemple, les points d'arrêt par défaut affichent automatiquement quatre colonnes en deux colonnes sur une tablette, et en une seule colonne sur un téléphone mobile, ce qui rend le formulaire lisible sur de plus petites largeurs d’écran et élimine le besoin de défilement horizontal.

responsive-ui-loop-gif

Modèles de mises en page

Dans App Studio, la mise en page des champs est limitée aux modèles de conception disponibles. Le modèle de conception détermine la façon dont l’interface utilisateur change. Vous pouvez modifier le modèle de mise en page en configurant la vue au moment de l’exécution.

Par exemple, vous pouvez configurer une vue pour utiliser un modèle de conception à 2 colonnes au lieu d’un modèle à 1 colonne.

template-change

Vérifiez vos connaissances avec l’interaction suivante.


This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice