# Listenkomponente für Stripe-Apps

Zeigen Sie eine Liste mit Informationen in verschiedenen vorkonfigurierten Formaten an.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/list?app-sdk-version=8.

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

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

Sie können den `onAction`-Handler verwenden, um auf `press`-Ereignisse für Listenelemente zu reagieren.

### Eigenschaften auflisten

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

  Eine oder mehrere `ListItem`-Komponenten.                                                                            |
| `onAction`  | (Optional)
  `((id: React.Key) => void) | undefined`

  Drücken Sie den Ereignis-Handler, der die entsprechende Taste des gedrückten `ListItem` empfängt. |

## Listenelemente

Jede Liste besteht aus mehreren `ListItem`-Komponenten. Jedes Listenelement sollte über die Eigenschaft `key` eindeutig identifiziert werden.

### Eigenschaften von ListItem

| Eigenschaft      | Typ                                                                                                                                                                                 |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icon`           | (Optional)
  `React.ReactNode`

  Symbol, das links neben dem Inhalt und der Beschreibung angezeigt wird. Wird durch das `image` überschrieben, wenn beide Optionen vorhanden sind. |
| `id`             | (Optional)
  `string | undefined`

  Die ID des Elements. Dies wird an den `onAction`-Handler von `List` übergeben.                                                                 |
| `image`          | (Optional)
  `React.ReactNode`

  Bild, das links neben dem Inhalt und der Beschreibung angezeigt wird. Wird durch das `icon` überschrieben, wenn beide Optionen vorhanden sind.    |
| `secondaryTitle` | (Optional)
  `React.ReactNode`

  Sekundärer Inhalt für die `ListItem`-Komponente.                                                                                                  |
| `size`           | (Optional)
  `("default" | "large") | undefined`

  Größe der `ListItem`-Komponente.                                                                                                |
| `title`          | (Optional)
  `React.ReactNode`

  Titel-Inhalt für die `ListItem`-Komponente.                                                                                                       |
| `value`          | (Optional)
  `React.ReactNode`

  Der Wert, der auf der rechten Seite des Elements angezeigt werden soll.                                                                           |

## Sekundärer Titel

Mit der Eigenschaft `secondaryTitle` können Sie einem Listenelement einen sekundären Titel hinzufügen.

## Werte

Die `value`-Eigenschaft des `ListItem` kann beliebiges JSX annehmen.

### Nicht unterstützte Komponenten

Beachten Sie, dass bestimmte interaktive Komponenten **nicht** als `value`-Eigenschaften in einem `ListItem` funktionieren:

- [Auswahl](https://docs.stripe.com/stripe-apps/components/select.md)
- [TextArea](https://docs.stripe.com/stripe-apps/components/textarea.md)
- [TextField](https://docs.stripe.com/stripe-apps/components/textfield.md)


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/list?app-sdk-version=9.

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

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

Sie können den `onAction`-Handler verwenden, um auf `press`-Ereignisse für Listenelemente zu reagieren.

### Eigenschaften auflisten

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

  Eine oder mehrere `ListItem`-Komponenten.                                                                            |
| `onAction`  | (Optional)
  `((id: React.Key) => void) | undefined`

  Drücken Sie den Ereignis-Handler, der die entsprechende Taste des gedrückten `ListItem` empfängt. |

## Listenelemente

Jede Liste besteht aus mehreren `ListItem`-Komponenten. Jedes Listenelement sollte über die Eigenschaft `key` eindeutig identifiziert werden.

### Eigenschaften von ListItem

| Eigenschaft      | Typ                                                                                                                                                                                 |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icon`           | (Optional)
  `React.ReactNode`

  Symbol, das links neben dem Inhalt und der Beschreibung angezeigt wird. Wird durch das `image` überschrieben, wenn beide Optionen vorhanden sind. |
| `id`             | (Optional)
  `string | undefined`

  Die ID des Elements. Dies wird an den `onAction`-Handler von `List` übergeben.                                                                 |
| `image`          | (Optional)
  `React.ReactNode`

  Bild, das links neben dem Inhalt und der Beschreibung angezeigt wird. Wird durch das `icon` überschrieben, wenn beide Optionen vorhanden sind.    |
| `secondaryTitle` | (Optional)
  `React.ReactNode`

  Sekundärer Inhalt für die `ListItem`-Komponente.                                                                                                  |
| `size`           | (Optional)
  `("default" | "large") | undefined`

  Größe der `ListItem`-Komponente.                                                                                                |
| `title`          | (Optional)
  `React.ReactNode`

  Titel-Inhalt für die `ListItem`-Komponente.                                                                                                       |
| `value`          | (Optional)
  `React.ReactNode`

  Der Wert, der auf der rechten Seite des Elements angezeigt werden soll.                                                                           |

## Sekundärer Titel

Mit der Eigenschaft `secondaryTitle` können Sie einem Listenelement einen sekundären Titel hinzufügen.

## Werte

Die `value`-Eigenschaft des `ListItem` kann beliebiges JSX annehmen.

### Nicht unterstützte Komponenten

Beachten Sie, dass bestimmte interaktive Komponenten **nicht** als `value`-Eigenschaften in einem `ListItem` funktionieren:

- [Auswahl](https://docs.stripe.com/stripe-apps/components/select.md)
- [TextArea](https://docs.stripe.com/stripe-apps/components/textarea.md)
- [TextField](https://docs.stripe.com/stripe-apps/components/textfield.md)


## 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)