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

アコーディオンを使用し、長いコンテンツや複雑なコンテンツを、折りたたみ可能な部分に分割します。

# v8

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

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

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

アコーディオンは、ユーザーが作業中のコンテキストを離れずに、コレクションを素早く見渡し、要素を特定し、詳細にアクセスするために便利です。

これは、3 つの `AccordionItem` コンポーネントを含む、`Accordion` コンポーネントのプレビューです。

### Accordion プロパティ

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

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

## AccordionItem

`Accordion` コンポーネントは、1 つ以上の `AccordionItem` コンポーネントを含みます。

### AccordionItem プロパティ

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

  コンポーネントのコンテンツ。                                                                                       |
| `title`       | (必須)
  `React.ReactNode`

  `AccordionItem` を説明するタイトル。                                                                           |
| `actions`     | (オプション)
  `React.ReactNode`

  `AccordionItem` に対してユーザーが実行できるアクションを格納するコンポーネント。アクションが 2 つ以上ある場合は、オーバーフローメニューを使用して残りのアクションを表示します。 |
| `defaultOpen` | (オプション)
  `boolean | undefined`

  初回のレンダリング時に `AccordionItem` を開くかどうか。                                                          |
| `media`       | (オプション)
  `React.ReactNode`

  `AccordionItem` を識別するための、オプションの `Img` または `Icon` を格納するコンポーネント。                                    |
| `onChange`    | (オプション)
  `((isOpen: boolean) => void) | undefined`

  open の状態から変化したときにコールバックします。                                               |
| `subtitle`    | (オプション)
  `React.ReactNode`

  追加の説明情報を含むオプションのサブタイトル。                                                                           |

## タイトルと副タイトル

すべての `AccordionItem` コンポーネントに、項目を一意に識別する `title` でラベルを付けます。オプションの `subtitle` を使用して説明や追加の関連情報を提供することもできます。

## メディア

`AccordionItem` コンポーネントには、ユーザーが項目を識別しやすくするための、関連するアイコンや画像を表示する媒体要素を含めることができます。メディアは、ユーザーが項目を識別するのに役立ち、メディアと項目自体の関連性が強い場合にのみ使用します。

## アクション

アコーディオントリガーの右側に配置されたボタンやリンクで、項目が実行できるアクションを表すことができます。

## 項目を無効化する

無効化されたアコーディオン項目をユーザーが操作する能力を削除するのではなく、関連するアクションを無効化して、ユーザーに項目内の情報をできる限り提示します。


# v9

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

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

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

アコーディオンは、ユーザーが作業中のコンテキストを離れずに、コレクションを素早く見渡し、要素を特定し、詳細にアクセスするために便利です。

これは、3 つの `AccordionItem` コンポーネントを含む、`Accordion` コンポーネントのプレビューです。

### Accordion プロパティ

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

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

## AccordionItem

`Accordion` コンポーネントは、1 つ以上の `AccordionItem` コンポーネントを含みます。

### AccordionItem プロパティ

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

  コンポーネントのコンテンツ。                                                                                       |
| `title`       | (必須)
  `React.ReactNode`

  `AccordionItem` を説明するタイトル。                                                                           |
| `actions`     | (オプション)
  `React.ReactNode`

  `AccordionItem` に対してユーザーが実行できるアクションを格納するコンポーネント。アクションが 2 つ以上ある場合は、オーバーフローメニューを使用して残りのアクションを表示します。 |
| `defaultOpen` | (オプション)
  `boolean | undefined`

  初回のレンダリング時に `AccordionItem` を開くかどうか。                                                          |
| `media`       | (オプション)
  `React.ReactNode`

  `AccordionItem` を識別するための、オプションの `Img` または `Icon` を格納するコンポーネント。                                    |
| `onChange`    | (オプション)
  `((isOpen: boolean) => void) | undefined`

  open の状態から変化したときにコールバックします。                                               |
| `subtitle`    | (オプション)
  `React.ReactNode`

  追加の説明情報を含むオプションのサブタイトル。                                                                           |

## タイトルと副タイトル

すべての `AccordionItem` コンポーネントに、項目を一意に識別する `title` でラベルを付けます。オプションの `subtitle` を使用して説明や追加の関連情報を提供することもできます。

## メディア

`AccordionItem` コンポーネントには、ユーザーが項目を識別しやすくするための、関連するアイコンや画像を表示する媒体要素を含めることができます。メディアは、ユーザーが項目を識別するのに役立ち、メディアと項目自体の関連性が強い場合にのみ使用します。

## アクション

アコーディオントリガーの右側に配置されたボタンやリンクで、項目が実行できるアクションを表すことができます。

## 項目を無効化する

無効化されたアコーディオン項目をユーザーが操作する能力を削除するのではなく、関連するアクションを無効化して、ユーザーに項目内の情報をできる限り提示します。


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