Disposition du conteneur

Utilisez Disposition du conteneur (Container Layouts) pour créer une mise en page d'application complexe.

Lorsqu'une commande de disposition de conteneur est ajoutée, un seul conteneur est disponible par défaut. Pour ajouter des conteneurs plus simples, cliquez sur l'icône « + » qui borde les conteneurs existants.

Pour repositionner un conteneur dans la mise en page, glissez et déposez le conteneur à la position souhaitée.

Pour redimensionner les conteneurs, glissez le coin du conteneur.

Pour supprimer un conteneur, sélectionnez-le et utilisez la touche Suppr de votre clavier. Sinon, dans l'arborescence, cliquez avec le bouton droit sur le conteneur et sélectionnez Supprimer (Delete).

La commande de disposition du conteneur a 2 ensembles de propriétés :

• Un ensemble pour la disposition du conteneur

• Un ensemble pour chaque conteneur au sein de la disposition

Remarque :

Nous vous recommandons d'utiliser les commandes Disposition du conteneur (Container Layout) au niveau de la page pour structurer la page en différentes sections.

Pour aligner et positionner les commandes au sein d'une page, utilisez les commandes Conteneur (Container).

Attention : pour une maintenance facile et une cohérence entre la conception et le runtime, évitez d'imbriquer des dispositions de conteneur.

Propriétés de l'affichage du conteneur

Général

• Masqué (Hidden) : si la valeur est true, masque la commande au moment du runtime.

• Désactivé (Disabled) : si la valeur est true, désactive la commande au moment du runtime.

Events

Pas d’événements.

Style

• Couleur d'arrière-plan (Background color) : la couleur d'arrière-plan de la disposition.
• Police (Font) : la famille de polices relative à la mise en page du conteneur. Tous les conteneurs de la mise en page partagent la même famille de polices.
• Marge (Margin) : définit la marge de la mise en page. Par défaut, une marge de 0px est définie. Les propriétés des marges Haut/Bas (Top/Bottom)et Gauche/Droite (Left/Right) sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Marge (Margin).
• Remplissage (Padding) : remplissage de la mise en page. Par défaut, un remplissage de 0px est défini. Les propriétés des marges Haut/Bas (Top/Bottom)et Gauche/Droite (Left/Right) sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Remplissage (Padding).
• Taille (Size) : largeur et hauteur de la mise en page. Par défaut, la largeur (Width) est définie sur 100px, tandis que la hauteur (Height) est définie sur auto, pour permettre à la mise en page de se développer en fonction des conteneurs qu'elle contient.

Propriétés du conteneur

Général

• Info-bulle (Tooltip) : info-bulle à afficher sur le conteneur. Utilisez-la pour fournir des informations supplémentaires sur la commande.

• Masqué (Hidden) : si la valeur est true, masque la commande au moment du runtime.

• Désactivé (Disabled) : si la valeur est true, désactive la commande au moment du runtime.

Events

• Cliqué (Clicked On) : configurez ce qui se passe lorsqu'un clic est effectué sur le conteneur.

Style

• Mise en page (Layout) : déterminez comment les commandes du conteneur sont positionnées :

  • Horizontal/Vertical : l'orientation des commandes.
  • Alignement (Alignment) : l'alignement des commandes dans le conteneur.
  • Autoriser l'encapsulage (Allow wrapping) : si cette option est sélectionnée, encapsule les commandes dans le conteneur.

  • Autoriser le défilement (Allow scrolling) : si cette option est sélectionnée, elle permet de faire défiler l'intérieur du conteneur.

• Couleur d'arrière-plan (Background Color) : couleur d'arrière-plan du conteneur.
• Bordure (Border) : la bordure de la commande. L'épaisseur (Thickness), la couleur (Color) et le rayon (Radius) peuvent être configurés.
• Police (Font) : la famille de polices relative à la mise en page du conteneur. Toutes les commandes à l'intérieur du conteneur partagent la même famille de polices. Par défaut, la commande hérite de la famille de polices de son conteneur parent immédiat, qui est indiqué par le mot-clé « Inherited ».
• Marge (Margin) : définit la marge de la mise en page. Par défaut, une marge de 0px est définie. Les propriétés des marges Haut/Bas (Top/Bottom)et Gauche/Droite (Left/Right) sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Marge (Margin).
• Remplissage (Padding) : remplissage de la mise en page. Par défaut, un remplissage de 0px est défini. Les propriétés des marges Haut/Bas (Top/Bottom)et Gauche/Droite (Left/Right) sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Remplissage (Padding).

• Avancé (Advanced) : affiche les propriétés flexibles de la commande.

  • Base Flex - définit la taille d'origine d'un élément Flex avant que l'espace supplémentaire ne soit distribué ou supprimé (px, %, em, auto).

  • Croître flexible (Flexi*) : lorsqu'un espace supplémentaire est disponible, ces valeurs dictent la croissance d'un élément flexible par rapport au reste des éléments.

  • Réduction du libelle : lorsque l’espace est insuffisant, cette valeur détermine la valeur à laquelle un élément flexible doit rétrécir par rapport aux autres éléments.

    Pour plus de détails, consultez la documentation de Mozilla Developer Network.