# PropertyList-Komponente für Stripe Apps

Verwenden Sie PropertyList, um Daten als Schlüssel-Wert-Paare anzuzeigen.

# v9


So fügen Sie Ihrer App die `PropertyList` Komponente hinzu:

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

Die Komponente `PropertyList` zeigt Objekteigenschaften als Satz von Beschriftungen und ihren jeweiligen Werten an. Sie definieren jede Eigenschaft als Schlüssel-Wert-Paar, damit Nutzer/innen bestimmte Attribute leichter finden können.

Eigenschaftslisten können sowohl einfache Werte als auch verschachtelte `PropertyListItem`-Komponenten anzeigen, um logische hierarchische Abschnitte zu erstellen, die verwandte Eigenschaften gruppieren.

Das folgende Beispiel zeigt eine Eigenschaftsliste mit einfachen Werten und geschachtelten Abschnitten.

### PropertyList-Eigenschaften

| Eigenschaft   | Typ                                                                                                                                |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Pflichtfeld)
  `React.ReactNode`

  Eine oder mehrere `PropertyListItem`-Komponenten, die jeweils ein Label-Wert-Paar definieren. |
| `orientation` | (Optional)
  `("vertical" | "horizontal") | undefined`

  Die Ausrichtung der Liste.                                               |

## PropertyListItem

Ein `PropertyListItem` definiert ein Label-Wert-Paar innerhalb der `PropertyList`. Sie können verschachtelte `PropertyListItem`-Sätze erstellen, indem Sie den `value` eines `PropertyListItem` als Satz zusätzlicher `PropertyListItem`-Komponenten definieren.

### Eigenschaften von PropertyListItem

| Eigenschaft | Typ                                                                                                                                                                                                              |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | (Pflichtfeld)
  `React.ReactNode`

  Der Name der Eigenschaft, die in der Liste dargestellt werden soll.                                                                                                         |
| `value`     | (Optional)
  `React.ReactNode`

  Der Wert der anzuzeigenden Eigenschaft, z. B. eine statische Eingabe, eine Formel, ein Datenbankverweis oder ein verschachtelter Satz von `PropertyListItem`-Komponenten. |

## Erste Schritte

Sie können die Eigenschaften in Ihrer Liste entweder vertikal (Standard) oder horizontal anzeigen.


## See also

- [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md)
- [App gestalten](https://docs.stripe.com/stripe-apps/style.md)
- [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)