Stripe Apps の PropertyList コンポーネント
PropertyList を使用し、データをキーと値のペアとして表示します。
警告
このバージョンの SDK はプレリリースであり、不安定な場合があります。導入に必要でない限り、このバージョンは使用しないでください。
PropertyList コンポーネントをアプリに追加するには、以下のようにします。
import {PropertyList, PropertyListItem} from '@stripe/ui-extension-sdk/ui';
PropertyList コンポーネントは、オブジェクトのプロパティをラベルとそれぞれの値のセットとして表示します。各プロパティをキーと値のペアとして定義し、ユーザーが特定の属性を見つけやすくします。
プロパティリストでは、単純な値とネストされた PropertyListItem コンポーネントの両方を表示して、関連するプロパティをグループ化する論理階層セクションを作成できます。
次の例は、単純な値とネストされたセクションを含むプロパティリストを示しています。
サンプルを読み込み中...
<PropertyList> <PropertyListItem label="Object ID" value="cus_MIP4POO5wvyaly" /> <PropertyListItem label="Customer" value={<Link>Megan Smith</Link>} /> <PropertyListItem label="Last update" value="Sep 28, 10:50 PM" /> <PropertyListItem label="Payment method" value={ <Box css={{stack: 'x', alignY: 'center'}}> <Icon name="card" /> <Inline css={{marginLeft: 'small'}}>•••• 6178</Inline> </Box> } /> <PropertyListItem label="Payment Details" value={ <> <PropertyListItem label="Amount" value="$3000.00" /> <PropertyListItem label="Currency" value="USD" /> <PropertyListItem label="Status" value="Paid" /> <PropertyListItem label={<Link>Raw JSON</Link>} /> <PropertyListItem label={<Link>Revenue Recognition</Link>} /> </> } /> <PropertyListItem label="Property" value={ <> <PropertyListItem label="Location name" value="Austin HQ" /> <PropertyListItem label="Location address" value="123 Fake St. Austin, TX 78705" /> <PropertyListItem label="Device type" value="WisePOS E" /> </> } /> </PropertyList>
PropertyList プロパティ
| プロパティ | タイプ |
|---|---|
| 必要
それぞれがラベルと値のペアを定義する 1 つ以上の |
| オプション
リストの向き。 |
PropertyListItem
PropertyListItem は、PropertyList 内の 1 つのラベルと値のペアを定義します。1 つの PropertyListItem の value を追加の PropertyListItem コンポーネントのセットとして定義することで、ネストされた PropertyListItem セットを作成できます。
PropertyListItem プロパティ
| プロパティ | タイプ |
|---|---|
| 必要
リストに表示するプロパティの名前。 |
| オプション
静的入力、数式、データベース参照、ネストされた |
オリエンテーション
リスト内のプロパティは、垂直方向 (デフォルト) または水平方向に表示できます。
サンプルを読み込み中...
<Box> <PropertyList orientation="vertical"> <PropertyListItem label="Object ID" value="cus_MIP4POO5wvyaly" /> <PropertyListItem label="Customer" value={<Link>Megan Smith</Link>} /> <PropertyListItem label="Last update" value="Sep 28, 10:50 PM" /> <PropertyListItem label="Payment method" value={ <Box css={{stack: 'x', alignY: 'center'}}> <Icon name="card" /> <Inline css={{marginLeft: 'small'}}>•••• 6178</Inline> </Box> } /> </PropertyList> <Box css={{marginY: 'large'}}> <Divider /> </Box> <PropertyList orientation="horizontal"> <PropertyListItem label="Object ID" value="cus_MIP4POO5wvyaly" /> <PropertyListItem label="Customer" value={<Link>Megan Smith</Link>} /> <PropertyListItem label="Last update" value="Sep 28, 10:50 PM" /> <PropertyListItem label="Payment method" value={ <Box css={{stack: 'x', alignY: 'center'}}> <Icon name="card" /> <Inline css={{marginLeft: 'small'}}>•••• 6178</Inline> </Box> } /> </PropertyList> </Box>