Widgets Layout
,
,
,
,
Ces types de widgets appartiennent à la catégorie Layout de la bibliothèque des widgets. Ils permettent de définir les emplacements des widgets sur l'application.
Pour faciliter leur positionnement, l'écran est virtuellement découpé en lignes occupant au maximum 12 colonnes de taille égale. Suivant la taille du support graphique (moniteurs d'ordinateur, smartphones, tablettes, TV, ...), un widget peut occuper la totalité de ces 12 colonnes (pleine ligne) ou plusieurs widgets peuvent être affichés sur la même ligne.
Plusieurs modes sont disponibles pour prédéfinir les emplacements des widgets sur une ligne, la taille de chaque emplacement pouvant ensuite être réajustée manuellement.
Widget | Type d'utilisation | Design |
---|---|---|
![]() |
Écran large | Regroupement des 12 colonnes pour définir un emplacement unique |
![]() |
Création de 2 emplacements d'une largeur de 6 colonnes | |
![]() |
Création de 3 emplacements d'une largeur de 4 colonnes | |
![]() |
Création de 4 emplacements d'une largeur de 3 colonnes | |
![]() |
Écran de smartphone | Création de 6 emplacements d'une largeur de 2 colonnes
Note : Permet l'affichage des widgets les uns en dessous des autres |
Remarques
voir Remarques générales sur les widgets
- L'application peut occuper un nombre illimité de lignes.
Attention
- Si vous supprimez une ligne, tous les widgets positionnés dessus sont automatiquement supprimés.
Bonnes pratiques
- Créez un point de restauration via
avant d'effectuer toute modification des propriétés et de la mise en page des widgets.
Procédure : Comment définir les emplacements des widgets
1. Dans le volet Objets, cliquez sur .
2. Cliquez-glissez l'un des widgets de la catégorie Layout ,
,
,
,
vers le volet Conception.
- S'il s'agit d'une nouvelle page, le volet Conception affiche la première ligne avec une zone comportant le libellé Drop a Layout Widget Here.
- Les emplacements disponibles sont affichés en vert, avec le libellé Drop Here.
- La ligne est fractionnée en autant d'emplacements de largeur égale qu'indiqué par le widget sélectionné.
3. Vous pouvez définir des colonnes sous un emplacement.
Étape 1 | Étape 2 |
---|---|
![]() |
![]() |
4. Vous pouvez modifier la disposition des emplacements positionnés dans le volet Conception :
- Pour agrandir la largeur d'un emplacement, cliquez sur
dans la barre d'outils de l'emplacement situé à sa droite.
Étape 1 | Étape 2 |
---|---|
![]() |
![]() |
- Pour réduire la largeur d'un emplacement, cliquez sur
dans la barre d'outils de l'emplacement situé à sa gauche.
Étape 1 | Étape 2 |
---|---|
![]() |
![]() |
- Pour supprimer tous les emplacements situés sur une ligne, cliquez sur
dans la barre d'outils de celle-ci. Attention : Tous les widgets positionnés dans les emplacements de la ligne sont supprimés.
Étape 1 | Étape 2 |
---|---|
![]() |
![]() |
- Pour supprimer un emplacement, cliquez sur
dans la barre d'outils de celui-ci. Attention : Le widget positionné dans l'emplacement est supprimé.
Étape 1 | Étape 2 |
---|---|
![]() |
![]() |
- Pour déplacer une ligne, cliquez sur
dans la barre d'outils de celle-ci.
Étape 1 | Étape 2 | Étape 3 |
---|---|---|
![]() |
![]() |
![]() |
- Pour fractionner un emplacement en 2, cliquez sur
dans la barre d'outils de celui-ci.
Étape 1 | Étape 2 |
---|---|
![]() |
![]() |