# Tasklist-Komponente für Stripe Apps

Verwenden Sie TaskList, um Nutzern und Nutzerinnen zu helfen, ihren Fortschritt anhand einer Liste von Aufgaben zu verfolgen, die sie erledigen müssen.

# v8

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

Die Komponente `TaskList` ist in der ausgewählten SDK-Version nicht verfügbar.


# v9

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

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

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

Verwenden Sie `TaskList`:

- So unterteilen Sie größere Aufgaben oder Prozesse in mehrere, aufeinanderfolgende Schritte, die von einem/einer Nutzer/in ausgeführt werden müssen
- So erinnern Sie Nutzer/innen an ihren Fortschritt bei nicht erledigten Aufgaben

Aufgabenlisten bestehen aus einzelnen Elementen. Sie können Aufgabenlisten innerhalb von Aufgabenlistenelementen verschachteln, um Unteraufgaben darzustellen. Wenn ein/e Nutzer/in eine Aufgabe erledigt hat, zeigen Sie die Unteraufgaben nicht mehr an. Sie können sie entweder vollständig ausblenden, wenn sie nicht mehr nützlich sind, oder dem/der Nutzerin gestatten, sie per Klick anzuzeigen.

Im folgenden Beispiel wird veranschaulicht, wie eine Aufgabenliste mit einer Verbindungslinie gerendert wird, um die Anforderung zu verstärken, Aufgaben nacheinander auszuführen.

### TaskList-Eigenschaften

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

  Eine oder mehrere `TaskListItem`-Komponenten. |

## TaskListItem

`TaskList`-Komponenten enthalten eine oder mehrere `TaskListItem`-Komponenten, die jede Aufgabe definieren, die der/die Nutzer/in erledigen muss. Wenn ein Aufgabenlistenelement seine eigenen Unteraufgaben definiert, muss ein/e Nutzer/in diese Unteraufgaben erledigen, um die übergeordnete Aufgabe abzuschließen.

### TaskListItem-Eigenschaften

| Eigenschaft | Typ                                                                                                                                                                                                             |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`     | (Pflichtfeld)
  `string`

  Der Anzeigetitel der Aufgabe.                                                                                                                                                       |
| `onPress`   | (Optional)
  `((event: PressEvent) => void) | undefined`

  Ein Ereignishandler, wenn der/die Nutzer/in auf eine beliebige Stelle in der Aufgabe klickt.                                                        |
| `status`    | (Optional)
  `("not-started" | "in-progress" | "blocked" | "complete") | undefined`

  Der aktuelle Status der Aufgabe.                                                                                         |
| `subTasks`  | (Optional)
  `Array<SubTasks> | undefined`

  Eine Liste der Unteraufgaben, die zu dieser Aufgabe gehören.

  Verwandte Typen: [SubTasks](https://docs.stripe.com/stripe-apps/components/tasklist.md#subtasks). |

### SubTasks

| Eigenschaft | Typ                                                                                                                                                      |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`     | (Pflichtfeld)
  `string`

  Der Anzeigetitel der Aufgabe.                                                                                                |
| `onPress`   | (Optional)
  `((event: PressEvent) => void) | undefined`

  Ein Ereignishandler, wenn der/die Nutzer/in auf eine beliebige Stelle in der Aufgabe klickt. |
| `status`    | (Optional)
  `("not-started" | "in-progress" | "blocked" | "complete") | undefined`

  Der aktuelle Status der Aufgabe.                                  |

## Zustandsorientiert

Im folgenden Beispiel wird veranschaulicht, wie eine zustandsbehaftete Aufgabenliste gerendert wird, bei der der Status der einzelnen Aufgabenelemente als Reaktion auf ein Klickereignis aktualisiert wird.


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