Listenkomponente für Stripe-Apps
Zeigen Sie eine Liste mit Informationen in verschiedenen vorkonfigurierten Formaten an.
So fügen Sie Ihrer App die List Komponente hinzu:
import {List, ListItem} from '@stripe/ui-extension-sdk/ui';
Sie können den onAction-Handler verwenden, um auf press-Ereignisse für Listenelemente zu reagieren.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <List onAction={(id: string | number) => console.log(`Pressed row #${id}`)} aria-label="Example of a List" > <ListItem value="$100.00" id="1" title={<Box>Payment #1862</Box>} secondaryTitle={<Box>customer@test.com</Box>} /> <ListItem value="$63.00" id="2" title={<Box>Payment #9273</Box>} secondaryTitle={<Box>frank@example.com</Box>} /> <ListItem value="$7,471.62" id="3" title={<Box>Payment #643</Box>} secondaryTitle={<Box>robert@google.com</Box>} /> <ListItem value="$871.01" id="4" title={<Box>Payment #123</Box>} secondaryTitle={<Box>example@gmail.com</Box>} /> </List> </Box>
Eigenschaften auflisten
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
| Optional
Drücken Sie den Ereignis-Handler, der die entsprechende Taste des gedrückten |
Listenelemente
Jede Liste besteht aus mehreren ListItem-Komponenten. Jedes Listenelement sollte über die Eigenschaft key eindeutig identifiziert werden.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <List onAction={(id: string | number) => console.log(id)} aria-label="Example of a List" > <ListItem id="apple" title={<Box>Apple</Box>} /> <ListItem id="orange" title={<Box>Orange</Box>} /> <ListItem id="banana" title={<Box>Banana</Box>} /> </List> </Box>
Eigenschaften von ListItem
| Eigenschaft | Typ |
|---|---|
| Optional
Symbol, das links neben dem Inhalt und der Beschreibung angezeigt wird. Wird durch das |
| Optional
Die ID des Elements. Dies wird an den |
| Optional
Bild, das links neben dem Inhalt und der Beschreibung angezeigt wird. Wird durch das |
| Optional
Sekundärer Inhalt für die |
| Optional
Größe der |
| Optional
Titel-Inhalt für die |
| Optional
Der Wert, der auf der rechten Seite des Elements angezeigt werden soll. |
Sekundärer Titel
Mit der Eigenschaft secondaryTitle können Sie einem Listenelement einen sekundären Titel hinzufügen.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <List onAction={(id: string | number) => console.log(id)} aria-label="Example of a List" > <ListItem id="1" title={<Box>John Smith</Box>} secondaryTitle={<Box>johnsmith@test.com</Box>} /> <ListItem id="2" title={<Box>Jane Doe</Box>} secondaryTitle={<Box>janedoe@test.com</Box>} /> <ListItem id="3" title={<Box>Mark Foster</Box>} secondaryTitle={<Box>markfoster@test.com</Box>} /> </List> </Box>
Werte
Die value-Eigenschaft des ListItem kann beliebiges JSX annehmen.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <List onAction={(id) => console.log(id)} aria-label="Example of a List"> <ListItem value={ <Box css={{marginLeft: 'medium', marginRight: 'xsmall'}}> <Icon name="truck" /> </Box> } id="1" title={<Box>Payment #123</Box>} secondaryTitle={<Box>example@gmail.com</Box>} /> <ListItem value={ <Box css={{marginLeft: 'medium'}}> <Button onPress={() => console.log('delete')} type="destructive"> <Box css={{marginRight: 'xsmall'}}> <Icon name="trash" /> </Box> Delete </Button> </Box> } id="2" title={<Box>Payment #456</Box>} secondaryTitle={<Box>example@gmail.com</Box>} /> <ListItem value={ <Box css={{marginLeft: 'medium'}}> <Button onPress={() => console.log('edit')} type="primary"> Edit </Button> </Box> } id="3" title={<Box>Payment #789</Box>} secondaryTitle={<Box>example@gmail.com</Box>} /> </List> </Box>
Nicht unterstützte Komponenten
Beachten Sie, dass bestimmte interaktive Komponenten nicht als value-Eigenschaften in einem ListItem funktionieren: