Stripe Apps の PropertyList コンポーネント
PropertyList を使用し、データをキーと値のペアとして表示します。
警告
PropertyList コンポーネントをアプリに追加するには、以下のようにします。
import {PropertyList, PropertyListItem} from '@stripe/ui-extension-sdk/ui';
The PropertyList component displays object properties as as set of labels and their respective values. You define each property as a key-value pair to help users find specific attributes.
Property lists can display both simple values and nested PropertyListItem components to create logical hierarchical sections that group related properties.
The following example shows a property list with simple values and nested sections.
<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 props
| プロパティ | タイプ |
|---|---|
| 必要
One or more |
| オプション
The orientation of the list. |
PropertyListItem
A PropertyListItem defines one label-value pair within the PropertyList. You can create nested PropertyListItem sets by defining the value of one PropertyListItem as a set of additional PropertyListItem components.
PropertyListItem props
| プロパティ | タイプ |
|---|---|
| 必要
The name of the property to render in the list. |
| オプション
The value of the property to show, such as a static input, a formula, a database reference, or a nested set of |
オリエンテーション
You can display the properties in your list either vertically (default) or horizontally.
<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>