---
description: >-
  Le composant List Viewer vous permet d'ajouter, de visualiser et de cliquer
  sur les éléments d'une liste.
---

# List Viewer (Visionneuse de liste) (relecture en cours)

## Vue d'ensemble

* [Ajouter des éléments à une visionneuse de liste](#add-items-to-a-list-viewer)
* [Sélectionnez un élément dans une visionneuse de liste](#select-item-from-a-list-viewer)
* [Style de la visionneuse de liste](#style-the-list-viewer)
* [Modifier la hauteur de la visionneuse de liste](#edit-the-listviewer-height)
* [Ajouter un espacement](#add-spacing)

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6EwTAquLmNmHtwe2%2Flist-viewer-%E2%9C%95-fig-1.png?alt=media)

## Ajouter des éléments à une visionneuse de liste <a href="#add-items-to-a-list-viewer" id="add-items-to-a-list-viewer"></a>

### Petite Liste

Nous recommandons d'ajouter une courte liste d'éléments dans l'application elle-même lorsque l'écran démarre. Bien que le bloc liste lui-même puisse gérer un grand nombre d'éléments, en pratique, vous ne souhaiterez probablement utiliser cette approche que si votre projet comporte des dizaines d'éléments.

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6EzM854h1HAA_Upd%2Flist-viewer-%E2%9C%95-fig-2.png?alt=media)

### Liste Moyenne

Pour les listes plus longues, nous recommandons d'utiliser le composant [Tableur ](../untitled-3/airtable)(SpreadSheet)

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6F06x-tVclQH-aN4%2Flist-viewer-%E2%9C%95-fig-3.png?alt=media)

### Longue liste

## Sélectionner un élément à partir d'une visionneuse de liste <a href="#select-item-from-a-list-viewer" id="select-item-from-a-list-viewer"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6F2AMvlSteG-q8tQ%2Flist-viewer-%E2%9C%95-fig-4.png?alt=media)

| Propriété | Description                                                                               |
| --------- | ----------------------------------------------------------------------------------------- |
| ItemClick | Renvoie une valeur`item`et un numéro d'`index`numérique lorsqu'un article est sélectionné |

## Style de la visionneuse de liste <a href="#style-the-list-viewer" id="style-the-list-viewer"></a>

Vous pouvez personnaliser le composant List Viewer avec les propriétés suivantes :

* **Show Arrow:** Pour voir une flèche à côté de chaque élément de la liste, réglez le commutateur sur "True"
* **Visible:** Pour voir le texte saisi dans votre application, réglez le commutateur sur "True"
* **Border**
  * **Width:** Indiquez la largeur de la bordure du composant List Viewer que vous souhaitez
  * **Color:** Choisissez une couleur pour la bordure du composant List Viewer
  * **Style:** Choisissez si vous souhaitez que la bordure soit en pointillés, en tirets ou en traits pleins
  * **Radius:** Indiquez le tour que vous souhaitez donner aux bords de la bordure pour le composant List Viewer
* **Background Colour (Advanced):** Définit la couleur de fond du composant List Viewer

## Modifier la hauteur de la visionneuse de liste <a href="#edit-the-listviewer-height" id="edit-the-listviewer-height"></a>

Le composant List Viewer remplit automatiquement 100% de la largeur de l'écran

Vous pouvez définir la hauteur du composant List Viewer en utilisant la propriété de hauteur.

**Height**

* **Fill container -** Le composant List Viewer remplit tout l'écran verticalement
* **Fit contents -** La hauteur du composant List Viewer change pour s'adapter au contenu qu'il contient
* **Relative size -** Le composant List Viewer remplit le pourcentage spécifié de l'écran
* **Absolute size -** Dimensionne le composant List Viewer à un nombre de pixels déterminé

## Ajouter un espacement <a href="#add-spacing" id="add-spacing"></a>

Vous modifiez l'espacement et le positionnement du composant List Viewer avec les propriétés Margin (Marge) et Padding (Remplissage).

**Margin**

* Vous pouvez spécifier l'espace que vous souhaitez entre la bordure et le contenu du composant List Viewer en utilisant des valeurs en pixels ou en pourcentage.

**Padding**

* Vous pouvez spécifier l'espace que vous souhaitez entre les bords du composant List Viewer et l'écran en utilisant des valeurs en pixels ou en pourcentage.
