Design réactif avec des conteneurs

Introduction à Power Apps

Luise Freese

Azure & Power Platform Architect

Pourquoi le réactif ?

 

  • La même appli s'ouvre sur téléphones, tablettes, laptops
  • Une mise en page fixe déborde sur petit écran, se perd sur grand écran
  • Réactif = la mise en page s'adapte

$$

Téléphone, tablette et ordinateur portable affichant la même appli, passant d'une colonne à plusieurs colonnes.

Introduction à Power Apps

Conteneurs de disposition modernes

Illustration comparant des conteneurs Layout verticaux et horizontaux avec des contrôles enfants empilés ou côte à côte.

 

  • Conteneur de disposition vertical : empile les enfants de haut en bas
  • Conteneur de disposition horizontal : aligne les enfants de gauche à droite
  • Les contrôles modernes occupent l'espace disponible
Introduction à Power Apps

Largeur et hauteur flexibles

 

  • FlexibleWidth et FlexibleHeight
  • Activé : le contrôle s'étire pour remplir son conteneur
  • Désactivé : le contrôle garde une taille fixe

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Introduction à Power Apps

LayoutMinWidth et LayoutMinHeight

Téléphone vs tablette montrant LayoutMinWidth comme seuil où la disposition passe d'une colonne à panneau latéral + contenu.

 

  • Un conteneur a besoin de suffisamment d'espace pour se disposer correctement
  • LayoutMinWidth = la plus petite largeur avant réagencement
  • Déclenche une disposition différente pour téléphones vs tablettes
Introduction à Power Apps

Paramètres d'affichage de l'appli

 

  • Paramètres → Affichage règle l'orientation et la taille
  • Disposition de l'appli : Fixe adapte un seul ratio, Réactive s'adapte à l'écran
  • Testez à plusieurs tailles

$$

Boîte de dialogue Paramètres de Power Apps Studio, onglet Affichage, avec les options de disposition, d'orientation et de taille de canevas

Introduction à Power Apps

Les dispositions prédéfinies

Capture réelle du volet Nouveau d'Power Apps Studio affichant des modèles de disposition prédéfinis : Vide, Écran scindé, Barre latérale, En-tête et pied de page, Demande d'approbation et Écran d'accueil, chacun avec un petit aperçu.

 

  • + New screen propose des modèles de disposition prêts à l'emploi
  • Barre latérale, En-tête et pied de page, Écran scindé, déjà réactifs
  • Point de départ recommandé pour une première appli réactive
Introduction à Power Apps

Ce que vous allez créer

$$

Encapsulez les contrôles dans un conteneur Layout · Basculez entre tailles d'appareil · Voyez l'appli réagir

Illustration d'une appli sur téléphone, tablette et laptop, montrant la galerie qui s'adapte à chaque taille d'écran.

Introduction à Power Apps

Passons à la pratique !

Introduction à Power Apps

Preparing Video For Download...