Widget Flow Row (Ligne avec débordement automatique)

Le widget Flow Row (Ligne avec débordement automatique) est un conteneur de mise en page que vous pouvez utiliser pour positionner le contenu dans une ligne continue sur une page. Il s’apparente au widget Row (Ligne), sauf que la zone du widget Row (Ligne) est divisée en 12 colonnes discrètes, alors que le widget Flow Row (Ligne avec débordement automatique) est continu et ressemble à une page de défilement et au widget Column (Colonne).

Exemples

Utilisez ce widget pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous souhaitez que les éléments de page, tels que les images et leur description, soient alignés horizontalement.
• Lorsque vous supprimez un élément d’une ligne, vous voulez que les autres widgets de la ligne avec débordement automatique se décalent automatiquement ou remplissent l’espace laissé libre par l’élément supprimé.
• Vous voulez espacer de manière homogène plusieurs widgets à l’horizontale.
• Vous voulez placer deux widgets Text (Texte) dans une ligne.

  Conseil :

  Si vous placez deux widgets Text (Texte) dans un widget Fixed Panel (Panneau fixe), ils peuvent se superposer ou être coupés à différentes résolutions, car leurs positions sont indépendantes l’une de l’autre. Vous pouvez éviter les problèmes de superposition et de découpe en plaçant les widgets Text (Texte) dans un widget Flow Row (Ligne avec débordement automatique) et en définissant la largeur des trois widgets sur Auto.

Remarques sur l’utilisation

Pour ajouter des widgets au widget Flow Row (Ligne avec débordement automatique), cliquez sur le bouton Add widget (Ajouter un widget) dans la barre d’outils du widget et sélectionnez un widget dans la bibliothèque de widgets ou faites glisser des widgets depuis le volet Insert widget (Insérer un widget).

Une fois que vous avez ajouté au moins un widget à la ligne, le bouton Manage widget (Gérer le widget) apparaît dans la barre d’outils du widget. Cliquez sur ce bouton pour ouvrir une fenêtre qui permet de réorganiser et de supprimer les widgets imbriqués.

Lorsque vous supprimez un widget, tous les widgets restants sont décalés pour remplir l’espace laissé libre. La manière dont ils se décalent dépend de l’alignement que vous choisissez dans les paramètres du widget.

Remarque :

Pour conserver ce comportement en mode express, les widgets Placeholder (Emplacement réservé) n’apparaissent pas lorsque vous supprimez un widget d’un widget Flow Row (Ligne avec débordement automatique) alors que c’est le cas pour d’autres conteneurs de mise en page en mode express.

Pour augmenter la taille d’un widget imbriqué, ajustez sa largeur manuellement ou redimensionnez le widget Flow Row (Ligne avec débordement automatique).

Paramètres

Le widget Flow Row (Ligne avec débordement automatique) inclut les paramètres suivants :

• Horizontal align (Alignement horizontal) : choisissez comment aligner les widgets imbriqués dans la ligne.
  • Start (Début) : alignez les widgets imbriqués sur la gauche de la ligne.
  • End (Fin) : alignez les widgets imbriqués sur la droite de la ligne.
  • Center (Centre) : alignez les widgets imbriqués sur le centre de la ligne.
  • Space evenly (Espace uniforme) : positionnez les widgets imbriqués dans la ligne avec le même espace de chaque côté. L’espace entre les widgets inclut l’écart spécifié.

    

    Chacun des paramètres d’alignement horizontal est associé à une diagramme numéroté qui illustre comment les widgets imbriqués se répartissent dans le widget Flow Row (Ligne avec débordement automatique).

• Gap (Écart) : définissez l’espace horizontal entre les widgets imbriqués en pixels (px).

  Conseil :

  Si vous souhaitez que les bords des widgets imbriqués se touchent, alignez les widgets au début, à la fin ou au centre, et spécifiez une valeur de 0 pixels pour l’écart.

• Padding (Marge intérieure) : changez la taille des espaces de remplissage, qui sont les espaces entre les widgets imbriqués et les bords du volet du widget Flow Row (Ligne avec débordement automatique), en une fois ou individuellement. Vous pouvez spécifier les valeurs de taille en pixels (px) ou en pourcentage (%).