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

PropertyList を使用し、データをキーと値のペアとして表示します。

# v9


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

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

`PropertyList` コンポーネントは、オブジェクトのプロパティをラベルとそれぞれの値のセットとして表示します。各プロパティをキーと値のペアとして定義し、ユーザーが特定の属性を見つけやすくします。

プロパティリストでは、単純な値とネストされた `PropertyListItem` コンポーネントの両方を表示して、関連するプロパティをグループ化する論理階層セクションを作成できます。

次の例は、単純な値とネストされたセクションを含むプロパティリストを示しています。

### PropertyList プロパティ

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

  それぞれがラベルと値のペアを定義する 1 つ以上の `PropertyListItem` コンポーネント。 |
| `orientation` | (オプション)
  `("vertical" | "horizontal") | undefined`

  リストの向き。                    |

## PropertyListItem

`PropertyListItem` は、`PropertyList` 内の 1 つのラベルと値のペアを定義します。1 つの `PropertyListItem` の `value` を追加の `PropertyListItem` コンポーネントのセットとして定義することで、ネストされた `PropertyListItem` セットを作成できます。

### PropertyListItem プロパティ

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

  リストに表示するプロパティの名前。                                                       |
| `value` | (オプション)
  `React.ReactNode`

  静的入力、数式、データベース参照、ネストされた `PropertyListItem` コンポーネントセットなど、表示するプロパティの値。 |

## オリエンテーション

リスト内のプロパティは、垂直方向 (デフォルト) または水平方向に表示できます。


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