Conteneur

Le composant Conteneur est un bloc de construction polyvalent pour vos composants dynamiques. Considérez-le comme une base pour organiser et styliser d’autres composants.

Exemples de didacticiel Combobox

User Activity Report

---

Configuration Votre conteneur

1. Faites glisser le conteneur et faites glisser d'autres composants à l'intérieur

Le composant Container dispose d'un emplacement unique où vous pouvez faire glisser et déposer n'importe quel autre composant dynamique Avonni. Cela vous permet de créer des dispositions complexes et de regrouper des composants connexes. Par exemple, vous pouvez faire glisser plusieurs composants dans un conteneur pour créer une section avec une couleur d'arrière-plan ou une image spécifique.

Comment placer un autre composant à l'intérieur du conteneur

2. Personnalisez le conteneur

• Variante : Choisissez un style visuel pour le conteneur :

  • Standard : Un conteneur de base sans style supplémentaire.

  • Boîte : Ajoute une bordure subtile et un remplissage.

  • Carte : Crée un conteneur de type carte avec un effet d'ombre.

• Image d'arrière-plan : Téléchargez une image pour l'arrière-plan du conteneur.

• Couleur de superposition : Ajoutez une couleur de superposition semi-transparente à l'image d'arrière-plan pour améliorer la lisibilité ou créer un effet visuel spécifique.

Pourquoi utiliser le composant Container ?

Le composant Container est un excellent bloc de composant pour créer des mises en page bien structurées et visuellement attrayantes pour les composants dynamiques Avonni. Il agit comme un conteneur pour d'autres composants, offrant plusieurs avantages clés :

Organisation et structure

• Regroupement : Regroupez logiquement les composants liés. Cela améliore l'organisation de votre composant dynamique et facilite sa compréhension et sa maintenance.

• Hiérarchie visuelle : Créez une hiérarchie visuelle claire en regroupant les éléments au sein de conteneurs. Cela aide les utilisateurs à comprendre les relations entre les différentes parties de votre interface.

Style et mise en page

• Style cohérent : Appliquez des styles (couleurs, bordures, remplissage, etc.) au Container, qui seront appliqués à tous les composants à l'intérieur du conteneur. Cela garantit une cohérence visuelle et vous évite de devoir styliser chaque composant individuellement.

• Contrôle de la mise en page : Contrôlez la mise en page des composants contenus. Vous pouvez souvent définir des propriétés sur le Container pour contrôler l'alignement, l'espacement et d'autres aspects de la mise en page.

• Arrière-plan et bordures : Ajoutez facilement des couleurs d'arrière-plan ou des bordures autour d'un groupe de composants.

Flexibilité et réutilisabilité

• Déplacement/duplication faciles : Déplacez ou dupliquez un groupe entier de composants simplement en faisant glisser ou en copiant le Container. C'est beaucoup plus facile que de déplacer chaque composant individuellement.

• Imbrication de composants : Vous pouvez même imbriquer des conteneurs à l'intérieur autres conteneurs, créant des mises en page complexes et hiérarchiques.

Visibilité héritée

• Contrôle simplifié de la visibilité : Une crucial fonctionnalité du Container est qu'il contrôle la visibilité de ses composants contenus. Si vous définissez le Visible Liez la propriété false (ou le liez à une condition qui s'évalue à false), tous les composants à l'intérieur du Container seront masqués, indépendamment de leurs Visible paramètres. Cela simplifie la gestion de la visibilité de sections entières de votre interface.

En substance, le composant Container offre un moyen puissant de regrouper, styliser, organiser et contrôler la visibilité de plusieurs composants, conduisant à des composants dynamiques plus faciles à maintenir et visuellement plus attrayants.