# Composant TaskList pour Stripe Apps

Utilisez TaskList pour aider les utilisateurs à suivre leur progression dans la liste de tâches qu’ils doivent accomplir.

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

Le composant `TaskList` n’est pas disponible dans la version du SDK sélectionnée.


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

Pour ajouter le composant `TaskList` à votre application :

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

Utilisez `TaskList` :

- Pour diviser des tâches ou des processus plus importants en plusieurs étapes séquentielles qu’un utilisateur doit effectuer
- Pour rappeler aux utilisateurs l’avancement des tâches non achevées

Les listes de tâches sont constituées d’éléments individuels. Vous pouvez imbriquer des listes de tâches dans des éléments de liste de tâches pour représenter des sous-tâches. Lorsqu’un utilisateur termine une tâche, arrêtez d’afficher ses sous-tâches. Vous pouvez soit les masquer complètement si elles ne sont plus utiles, soit permettre à l’utilisateur de cliquer pour les afficher.

L’exemple suivant montre comment afficher une liste de tâches avec une ligne de connecteur pour renforcer l’exigence consistant à effectuer les tâches de manière séquentielle.

### Propriétés TaskList

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

  Un ou plusieurs composants `TaskListItem`. |

## TaskListItem

Les composants `TaskList` contiennent un ou plusieurs composants `TaskListItem` qui définissent chaque tâche que l’utilisateur doit effectuer. Si un élément de la liste des tâches définit ses propres sous-tâches, un utilisateur doit effectuer ces sous-tâches pour terminer la tâche parente.

### Propriétés TaskListItem

| Propriété  | Type                                                                                                                                                                                                                 |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`    | (Obligatoire)
  `string`

  Le titre affiché de la tâche.                                                                                                                                                            |
| `onPress`  | (Facultatif)
  `((event: PressEvent) => void) | undefined`

  Un gestionnaire d’événements pour quand l’utilisateur clique n’importe où dans la tâche.                                                               |
| `status`   | (Facultatif)
  `("not-started" | "in-progress" | "blocked" | "complete") | undefined`

  L’état actuel de la tâche.                                                                                                  |
| `subTasks` | (Facultatif)
  `Array<SubTasks> | undefined`

  Une liste des sous-tâches qui appartiennent à cette tâche.

  Types associés&nbsp;: [SubTasks](https://docs.stripe.com/stripe-apps/components/tasklist.md#subtasks). |

### SubTasks

| Propriété | Type                                                                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `title`   | (Obligatoire)
  `string`

  Le titre affiché de la tâche.                                                                                              |
| `onPress` | (Facultatif)
  `((event: PressEvent) => void) | undefined`

  Un gestionnaire d’événements pour quand l’utilisateur clique n’importe où dans la tâche. |
| `status`  | (Facultatif)
  `("not-started" | "in-progress" | "blocked" | "complete") | undefined`

  L’état actuel de la tâche.                                    |

## Avec état

L’exemple suivant montre comment afficher une liste de tâches avec état, où l’état de chaque élément de tâche est mis à jour en réponse à un événement de clic.


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