# Composant PropertyList pour Stripe Apps

Utilisez PropertyList pour afficher les données sous forme de paires clé-valeur.

# v9


Pour ajouter le composant `PropertyList` à votre application :

```js
import {PropertyList, PropertyListItem} from '@stripe/ui-extension-sdk/ui';
```

Le composant `PropertyList` affiche les propriétés de l’objet sous la forme d’un ensemble d’étiquettes et de leurs valeurs respectives. Vous définissez chaque propriété comme une paire clé-valeur pour aider les utilisateurs à trouver des attributs spécifiques.

Les listes de propriétés peuvent afficher à la fois des valeurs simples et des composants `PropertyListItem` imbriqués pour créer des sections hiérarchiques logiques regroupant des propriétés connexes.

L’exemple suivant montre une liste de propriétés avec des valeurs simples et des sections imbriquées.

### Propriétés PropertyList

| Propriété     | Type                                                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Obligatoire)
  `React.ReactNode`

  Un ou plusieurs composants `PropertyListItem` qui définissent chacun une paire étiquette-valeur. |
| `orientation` | (Facultatif)
  `("vertical" | "horizontal") | undefined`

  L’orientation de la liste.                                                |

## PropertyListItem

Un `PropertyListItem` définit une paire étiquette-valeur dans la `PropertyList`. Vous pouvez créer des ensembles de `PropertyListItem` imbriqués en définissant la `value` d’un `PropertyListItem` comme un ensemble de composants `PropertyListItem` supplémentaires.

### Propriétés PropertyListItem

| Propriété | Type                                                                                                                                                                                                            |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`   | (Obligatoire)
  `React.ReactNode`

  Le nom de la propriété à afficher dans la liste.                                                                                                                           |
| `value`   | (Facultatif)
  `React.ReactNode`

  La valeur de la propriété à afficher, telle qu’une entrée statique, une formule, une référence de base de données ou un ensemble imbriqué de composants `PropertyListItem`. |

## Orientation

Vous pouvez afficher les propriétés de votre liste soit verticalement (par défaut), soit horizontalement.


## See also

- [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md)
- [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md)
- [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)