# Column (Colonne)

## **Vue d'ensemble**

* [**Tutoriel vidéo**](#tutoriel-video)
* [**Définir la taille d'une colonne**](#definir-la-taille-dune-colonne)
* [**Espacer les éléments verticalement**](#espacer-les-elements-verticalement)
* [**Espacer les éléments horizontalement**](#espacez-les-elements-horizontalement)
* [**Ajouter une couleur ou une image de fond**](#ajouter-une-couleur-ou-une-image-de-fond)

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR7BDYQs-yi1yKSpKjR%2F-MR7BGxu7WH2dHxITu9S%2F1.png?generation=1610750173952038\&alt=media)

## **Tutoriel vidéo**

{% embed url="<https://youtu.be/_D-Y7iiW8qM>" %}

## **Définir la taille d'une colonne**

Pour plus d'informations sur le dimensionnement de votre application, veuillez consulter notre [introduction ici](https://docs.thunkable.com/intro-to-sizing)

| **Propriété**     | **Description**                                                                                                                                                                                                                                                                                                                                                     |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Height`(Hauteur) | <ul><li>Fill Container- La colonne remplit l'ensemble de l'écran verticalement</li><li>Fit Contents - La hauteur de la colonne change pour s'adapter aux éléments qu'elle contient</li><li>Relative Size - La colonne remplit le pourcentage spécifié de l'écran</li><li>Absolute Size - Taille de la colonne en fonction d'un nombre déterminé de pixels</li></ul> |
| `Width`(Largeur)  | <ul><li>Fill Container - La colonne remplit tout l'écran horizontalement</li><li>Fit Contents - La largeur de la colonne change pour s'adapter aux éléments qu'elle contient</li><li>Relative Size - La colonne remplit le pourcentage spécifié de l'écran</li><li>Absolute Size - Dimensionne la colonne en fonction d'un nombre déterminé de pixels</li></ul>     |

## **Espacer les éléments verticalement**

La propriété `Vertical Alignment` vous permet d'espacer verticalement les éléments d'une colonne.

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR7BDYQs-yi1yKSpKjR%2F-MR7BGxvU8EvCuRZhB4d%2F2.png?generation=1610750173940131\&alt=media)

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR7BDYQs-yi1yKSpKjR%2F-MR7BGxwHLSUbu_gGoLw%2F3.png?generation=1610750173933391\&alt=media)

## **Espacer les éléments horizontalement**

La propriété `Horizontal Alignment` vous permet d'espacer horizontalement les éléments d'une colonne

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR7BDYQs-yi1yKSpKjR%2F-MR7BGxx50qZ4d8CY820%2F4.png?generation=1610750173930638\&alt=media)

## **Ajouter une couleur ou une image de fond**

| Propriété       | Description                                                                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| BackgroundColor | Par défaut (`none`). Sélectionnez n'importe quelle couleur à l'aide du sélecteur de couleur, de la valeur RGBA ou HEX                        |
| BackgroundColor | Vous pouvez télécharger une image de fond dans votre application ou faire référence à l'adresse d'une image, par exemple `beaver-yellow.png` |

### **Mode de redimensionnement de l'image de fond**

Cela détermine comment redimensionner l'image lorsque le cadre ne correspond pas aux dimensions de l'image brute.

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR7BDYQs-yi1yKSpKjR%2F-MR7BGxyetBBtOl_gG71%2F5.png?generation=1610750173925196\&alt=media)

* Cover: Remplit tout l'écran sans modifier le rapport hauteur et largeur de l'image
* Contain: L'image entière sera réduite pour tenir à l'intérieur de l'écran, sans modifier le rapport hauteur/largeur de l'image
* Stretch: La hauteur de l'image change pour remplir l'écran dans le sens de la longueur
* Reapeat: Répétez l'image pour couvrir l'écran. Le rapport entre la hauteur et la largeur de l'imagene changera pas
* Center : Positionne l'image au milieu du cadre

### **Activer le défilement**

| Propriété  | Description                                                                                                                                                                                                                                                                     |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Scrollable | Par défaut (`false`). Indique si la colonne est déroulante. Pour que le défilement fonctionne, vous devez également régler la hauteur de votre écran pour qu'elle corresponde au contenu et les éléments de votre colonne doivent avoir des hauteurs définies en pixels absolus |