---
description: >-
  Une rangée est un conteneur horizontal qui vous permet de positionner les
  composants côte à côte.
---

# Row (Ligne)

## **Vue d'ensemble**

* [Définir la taille d'une ligne](#definir-la-taille-dune-ligne)
* [Espacer les éléments horizontalement](#espacer-les-elements-horizontalement)
* [Espacer les éléments verticalement](#espacez-les-elements-verticalement)
* [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-MR5wOmBCbX1ar6RhFQ7%2F-MR7B0gx5ddSC9k1emzK%2F1.png?generation=1610750107827581\&alt=media)

## **Tutoriel vidéo**

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

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

**Pour plus d'informations sur le dimensionnement de votre application, veuillez consulter notre introduction ici**

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

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

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

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

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

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

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

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

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

| Propriétés      | Descriptions                                                                                                                                 |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| BackgroundColor | Défaut (`none`). Sélectionnez n'importe quelle couleur à l'aide du sélecteur de couleur, de la valeur RGBA ou HEX                            |
| BackgroundImage | 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**

* 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
* Repeat: Répétez l'image pour couvrir l'écran. Le rapport entre la hauteur et la largeur de l'image ne changera pas
* Center : Positionne l'image au milieu du cadre
