Composant PropertyList pour Stripe Apps
Utilisez PropertyList pour afficher les données sous forme de paires clé-valeur.
Avertissement
Pour ajouter le composant PropertyList à votre application :
import {PropertyList, PropertyListItem} from '@stripe/ui-extension-sdk/ui';
Le composant PropertyList affiche les propriétés de l’objet sous la forme d’un ensemble d’étiquettes et de leurs valeurs respectives. Vous définissez chaque propriété comme une paire clé-valeur pour aider les utilisateurs à trouver des attributs spécifiques.
Les listes de propriétés peuvent afficher à la fois des valeurs simples et des composants PropertyListItem imbriqués pour créer des sections hiérarchiques logiques regroupant des propriétés connexes.
L’exemple suivant montre une liste de propriétés avec des valeurs simples et des sections imbriquées.
<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>
Propriétés PropertyList
| Propriété | Type |
|---|---|
| Obligatoire
Un ou plusieurs composants |
| Facultatif
L’orientation de la liste. |
PropertyListItem
Un PropertyListItem définit une paire étiquette-valeur dans la PropertyList. Vous pouvez créer des ensembles de PropertyListItem imbriqués en définissant la value d’un PropertyListItem comme un ensemble de composants PropertyListItem supplémentaires.
Propriétés PropertyListItem
| Propriété | Type |
|---|---|
| Obligatoire
Le nom de la propriété à afficher dans la liste. |
| Facultatif
La valeur de la propriété à afficher, telle qu’une entrée statique, une formule, une référence de base de données ou un ensemble imbriqué de composants |
Orientation
Vous pouvez afficher les propriétés de votre liste soit verticalement (par défaut), soit horizontalement.
<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>