Container

Cliquez pour copier

Utilisé pour regrouper des éléments


Paramètres de l'apparence et de la convivialité :

Name (obligatoire) - nom du composant.

Direction (obligatoire) - la façon dont les éléments sont disposés à l'intérieur du conteneur, verticalement ou horizontalement. Horizontal par défaut.

Wrap (obligatoire) - habillage du contenu lorsqu'il dépasse les limites du conteneur. Nowrap par défaut

Alignment (obligatoire) - l'alignement des éléments dans un conteneur. Start par défaut.

Sizes (obligatoire) - dimensions du conteneur. En pixels ou en pourcentage. Width 100% par défaut

Max Width (obligatoire) - largeur maximale du conteneur en pixels ou en pourcentage. 100% par défaut.

Margin (obligatoire) - retrait extérieur. 0 par défaut.

Padding (obligatoire) - Retrait intérieur. 0 par défaut Image, gradient ou superposition (non obligatoire) - pour l'arrière-plan.

Background color (facultatif) - couleur primaire de l'arrière-plan.

Border (non obligatoire) - paramètres de bordure du composant.

Visible (obligatoire) - rend le composant visible s'il est activé. Activé par défaut.

Container Settings


Déclencheurs de flux de travail :

  • onCreate - se déclenche lorsque l'élément est créé sur la page ;
  • onShow - se déclenche lorsque le composant passe à l'état visible (affiché sur la page) ;
  • onHide - se déclenche lorsque le composant passe à l'état caché (cesse d'être affiché) ;
  • onDestroy - se déclenche lorsque le composant est détruit ;
  • onClick - se déclenche lorsque le composant est cliqué.



Actions des composants :

Container get properties

Obtient les propriétés du conteneur.

Paramètres d'entrée :

  • Component Id [string] - l'identifiant du composant du conteneur.

Paramètres de sortie :

  • Width [string] - la largeur des composants ;
  • Height [string] - la hauteur des composants ;
  • Flex direction [enum] - la direction des composants ;
  • Wrap [enum] - l'habillage des composants ;
  • Alignment horizontal [enum] - l'alignement horizontal du composant ;
  • Alignment vertical [enum] - l'alignement vertical du composant ;
  • Margin [string] - la marge du composant ;
  • Padding [string] - padding du composant ;
  • Border [string] - la bordure du composant ;
  • Background color [string] - la couleur de fond du composant ;
  • Visible [boolean] - l'état de visibilité du composant.


Container set properties

Obtient les propriétés du conteneur.

Paramètres d'entrée :

  • Component Id [string] - identifiant du composant du conteneur.

Paramètres de sortie :

  • Width [string] - la largeur des composants ;
  • Height [string] - la hauteur des composants ;
  • Flex direction [enum] - la direction des composants ;
  • Wrap [enum] - enveloppement des composants ;
  • Alignment horizontal [enum] - l'alignement horizontal du composant ;
  • Alignment vertical [enum] - l'alignement vertical du composant ;
  • Margin [string] - la marge du composant ;
  • Padding [string] - padding du composant ;
  • Border [string] - la bordure du composant ;
  • Background color [string] - la couleur de fond du composant ;
  • Visible [boolean] - état de visibilité du composant.


Container update properties

Mise à jour des propriétés du conteneur

Paramètres d'entrée :

  • Component Id [string] - identifiant du composant conteneur ;
  • Width [string] - largeur du composant ;
  • Height [string] - la hauteur du composant ;
  • Flex direction [enum] - la direction des composants ;
  • Wrap [enum] - enveloppement des composants ;
  • Alignment horizontal [enum] - l'alignement horizontal du composant ;
  • Alignment vertical [enum] - l'alignement vertical du composant ;
  • Margin [string] - la marge du composant ;
  • Padding [string] - padding du composant ;
  • Border [string] - la bordure du composant ;
  • Border radius [string] - le rayon de la bordure du composant ;
  • Background color [string] - la couleur de fond du composant ;
  • Visible [boolean] - état de visibilité du composant.



Exemple d'utilisation

Un conteneur peut être utilisé pour regrouper des éléments. Par exemple, pour assembler un formulaire à partir de plusieurs champs de saisie différents :

example use containers