# Stripe Apps の TaskList コンポーネント

TaskList を使用すると、ユーザーは完了する必要があるタスクの一覧で進行状況を把握できます。

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

`TaskList` コンポーネントは、選択した SDK バージョンでは使用できません。


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

`TaskList` コンポーネントをアプリに追加するには、以下のようにします。

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

`TaskList` を次に使用します。

- 大きなタスクまたはプロセスを、ユーザーが完了する複数の連続したステップに分割する
- 未完了のタスクの進捗状況をユーザーに通知する

タスクリストは、個々のアイテムで構成されます。タスクリストをタスクリストアイテム内にネストして、サブタスクを表すことができます。ユーザーがタスクを完了したら、そのサブタスクの表示を停止します。役に立たなくなった場合は完全に非表示にするか、ユーザーがクリックして表示できるようにすることができます。

次の例は、コネクターラインを使用してタスクリストを表示し、タスクを順番に完了する要件を強調する方法を示しています。

### TaskList プロパティ

| プロパティ      | タイプ                                                        |
| ---------- | ---------------------------------------------------------- |
| `children` | (必要)
  `React.ReactNode`

  1 つ以上の `TaskListItem` コンポーネント。 |

## TaskListItem

`TaskList` コンポーネントには、ユーザーが実行する必要がある各タスクを定義する 1 つ以上の `TaskListItem` コンポーネントが含まれます。タスクリスト項目が固有のサブタスクを定義している場合、ユーザーはそれらのサブタスクを完了して親タスクを完了する必要があります。

### TaskListItem プロパティ

| プロパティ      | タイプ                                                                                                                                                     |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`    | (必要)
  `string`

  タスクの表示タイトル。                                                                                                                          |
| `onPress`  | (オプション)
  `((event: PressEvent) => void) | undefined`

  ユーザーがタスク上の任意の場所をクリックしたときのイベントハンドラー。                                                            |
| `status`   | (オプション)
  `("not-started" | "in-progress" | "blocked" | "complete") | undefined`

  タスクの現在のステータス。                                                       |
| `subTasks` | (オプション)
  `Array<SubTasks> | undefined`

  このタスクに属するサブタスクのリスト。

  関連型: [SubTasks](https://docs.stripe.com/stripe-apps/components/tasklist.md#subtasks)。 |

### SubTasks

| プロパティ     | タイプ                                                                                               |
| --------- | ------------------------------------------------------------------------------------------------- |
| `title`   | (必要)
  `string`

  タスクの表示タイトル。                                                                    |
| `onPress` | (オプション)
  `((event: PressEvent) => void) | undefined`

  ユーザーがタスク上の任意の場所をクリックしたときのイベントハンドラー。      |
| `status`  | (オプション)
  `("not-started" | "in-progress" | "blocked" | "complete") | undefined`

  タスクの現在のステータス。 |

## ステートフル

次の例は、クリックイベントに応答して各タスク項目の状態が更新される、ステートフルタスクリストの表示方法を示しています。


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)