# Stripe Apps の List コンポーネント 事前設定されたさまざまなフォーマットで情報のリストを表示します。 # 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. `List` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {List, ListItem} from '@stripe/ui-extension-sdk/ui'; ``` リストアイテムに対する `press` イベントに応答するには、`onAction` ハンドラを使用します。 ### List プロパティ | プロパティー | タイプ | | ---------- | -------------------------------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` 1 つ以上の `ListItem` コンポーネント。 | | `onAction` | (オプション) `((id: React.Key) => void) | undefined` 押された `ListItem` に対応するキーを受け取る、Press イベントハンドラー。 | ## リストアイテム すべてのリストは、`ListItem` コンポーネントのコレクションで構成されます。`key` プロパティを使用して各リストアイテムを一意に識別します。 ### ListItem プロパティ | プロパティー | タイプ | | ---------------- | ----------------------------------------------------------------------------------- | | `icon` | (オプション) `React.ReactNode` コンテンツと説明の左側に表示されるアイコン。両方が存在する場合、`image` によって上書きされます。 | | `id` | (オプション) `string | undefined` アイテムの ID。これは `List` の `onAction` ハンドラーに渡されます。 | | `image` | (オプション) `React.ReactNode` コンテンツと説明の左側に表示される画像。両方が存在する場合、`icon` を上書きします。 | | `secondaryTitle` | (オプション) `React.ReactNode` `ListItem` コンポーネントの 2 次コンテンツ。 | | `size` | (オプション) `("default" | "large") | undefined` `ListItem` コンポーネントのサイズ。 | | `title` | (オプション) `React.ReactNode` `ListItem` コンポーネントのタイトルコンテンツ。 | | `value` | (オプション) `React.ReactNode` アイテムの右側に表示する値。 | ## 副題 `secondaryTitle` プロパティを使用して、リストアイテムに副題を追加できます。 ## 値 `ListItem` の `value` プロパティは任意の JSX を受け付けることができます。 ### サポートされていないコンポーネント 一部のインタラクティブなコンポーネントは `ListItem` の `value` プロパティとして機能**しない**ことに注意してください。 - [Select](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. `List` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {List, ListItem} from '@stripe/ui-extension-sdk/ui'; ``` リストアイテムに対する `press` イベントに応答するには、`onAction` ハンドラを使用します。 ### List プロパティ | プロパティー | タイプ | | ---------- | -------------------------------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` 1 つ以上の `ListItem` コンポーネント。 | | `onAction` | (オプション) `((id: React.Key) => void) | undefined` 押された `ListItem` に対応するキーを受け取る、Press イベントハンドラー。 | ## リストアイテム すべてのリストは、`ListItem` コンポーネントのコレクションで構成されます。`key` プロパティを使用して各リストアイテムを一意に識別します。 ### ListItem プロパティ | プロパティー | タイプ | | ---------------- | ----------------------------------------------------------------------------------- | | `icon` | (オプション) `React.ReactNode` コンテンツと説明の左側に表示されるアイコン。両方が存在する場合、`image` によって上書きされます。 | | `id` | (オプション) `string | undefined` アイテムの ID。これは `List` の `onAction` ハンドラーに渡されます。 | | `image` | (オプション) `React.ReactNode` コンテンツと説明の左側に表示される画像。両方が存在する場合、`icon` を上書きします。 | | `secondaryTitle` | (オプション) `React.ReactNode` `ListItem` コンポーネントの 2 次コンテンツ。 | | `size` | (オプション) `("default" | "large") | undefined` `ListItem` コンポーネントのサイズ。 | | `title` | (オプション) `React.ReactNode` `ListItem` コンポーネントのタイトルコンテンツ。 | | `value` | (オプション) `React.ReactNode` アイテムの右側に表示する値。 | ## 副題 `secondaryTitle` プロパティを使用して、リストアイテムに副題を追加できます。 ## 値 `ListItem` の `value` プロパティは任意の JSX を受け付けることができます。 ### サポートされていないコンポーネント 一部のインタラクティブなコンポーネントは `ListItem` の `value` プロパティとして機能**しない**ことに注意してください。 - [Select](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 - [従うべき設計パターン](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)