Composant de liste pour les applications Stripe
Affichez une liste d'informations dans un large éventail de formats préconfigurés.
Pour ajouter le composant List à votre application :
import {List, ListItem} from '@stripe/ui-extension-sdk/ui';
Vous pouvez utiliser le gestionnaire onAction pour répondre aux événements press sur les éléments de liste.
<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>
Propriétés des listes
| Propriété | Type |
|---|---|
| Obligatoire
Un ou plusieurs composants |
| Facultatif
Gestionnaire d’événement de pression qui reçoit la touche correspondante du |
Éléments de liste
Chaque liste est composée d’une collection de composants ListItem. Vous devez identifier de façon unique chaque élément de liste à l’aide de la propriété key.
<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>
Propriétés ListItem
| Propriété | Type |
|---|---|
| Facultatif
Icône qui apparaît à gauche du contenu et de la description. Elle est remplacée par |
| Facultatif
Identifiant de l’élément. Celui-ci sera transmis au gestionnaire |
| Facultatif
Image qui apparaît à gauche du contenu et de la description. Elle est remplacée par |
| Facultatif
Contenu secondaire pour le composant |
| Facultatif
Taille du composant |
| Facultatif
Titre du composant |
| Facultatif
Valeur à afficher sur le côté droit de l’élément. |
Titre secondaire
Vous pouvez ajouter un titre secondaire à un élément d’une liste à l’aide de la propriété secondaryTitle.
<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>
Valeurs
La propriété value ListItem peut prendre en charge du JSX arbitraire.
<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>
Composants non pris en charge
Notez que certains composants interactifs ne fonctionneront pas en tant que propriétés value dans un ListItem :