PropertyList-Komponente für Stripe Apps
Verwenden Sie PropertyList, um Daten als Schlüssel-Wert-Paare anzuzeigen.
Achtung
So fügen Sie Ihrer App die PropertyList Komponente hinzu:
import {PropertyList, PropertyListItem} from '@stripe/ui-extension-sdk/ui';
Die Komponente PropertyList zeigt Objekteigenschaften als Satz von Beschriftungen und ihren jeweiligen Werten an. Sie definieren jede Eigenschaft als Schlüssel-Wert-Paar, damit Nutzer/innen bestimmte Attribute leichter finden können.
Eigenschaftslisten können sowohl einfache Werte als auch verschachtelte PropertyListItem-Komponenten anzeigen, um logische hierarchische Abschnitte zu erstellen, die verwandte Eigenschaften gruppieren.
Das folgende Beispiel zeigt eine Eigenschaftsliste mit einfachen Werten und geschachtelten Abschnitten.
<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-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
| Optional
Die Ausrichtung der Liste. |
PropertyListItem
Ein PropertyListItem definiert ein Label-Wert-Paar innerhalb der PropertyList. Sie können verschachtelte PropertyListItem-Sätze erstellen, indem Sie den value eines PropertyListItem als Satz zusätzlicher PropertyListItem-Komponenten definieren.
Eigenschaften von PropertyListItem
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Name der Eigenschaft, die in der Liste dargestellt werden soll. |
| Optional
Der Wert der anzuzeigenden Eigenschaft, z. B. eine statische Eingabe, eine Formel, ein Datenbankverweis oder ein verschachtelter Satz von |
Erste Schritte
Sie können die Eigenschaften in Ihrer Liste entweder vertikal (Standard) oder horizontal anzeigen.
<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>