Composant de puce pour les applications Stripe
Utilisez des puces pour afficher des valeurs aux utilisateurs et leur permettre de les modifier.
Pour ajouter le composant Chip à votre application :
import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui';
Voici un aperçu de plusieurs composants Chip au sein d’un composant ChipList qui présente différentes configurations de propriété :
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <ChipList> <Chip label="Currency" value="USD" onDropdown={() => { console.log('Dropdown function triggered'); }} onClose={() => { console.log('Close function triggered'); }} /> <Chip label="Status" value="Succeeded" onDropdown={() => { console.log('Dropdown function triggered'); }} onClose={() => { console.log('Close function triggered'); }} /> <Chip label="Amount" onAddSuggestion={() => { console.log('Add Amount suggestion'); }} /> <Chip label="Date" onAddSuggestion={() => { console.log('Add Date suggestion'); }} /> </ChipList> </Box>
Propriétés de la ChipList
| Propriété | Type |
|---|---|
| Obligatoire
Un ou plusieurs composants |
| Facultatif
|
Propriétés de la puce
| Propriété | Type |
|---|---|
| Facultatif
Chaîne de caractères qui distingue la |
| Facultatif
La fonctionnalité à appeler lorsque l’utilisateur clique sur une |
| Facultatif
La fonctionnalité à appeler lorsque l’utilisateur clique sur l’icône pour supprimer une |
| Facultatif
La fonctionnalité à appeler lorsque l’utilisateur clique sur le côté droit d’une |
| Facultatif
La valeur actuellement sélectionnée d’une |
Puce suggérée
Pour permettre aux utilisateurs d’ajouter un élément représenté par une puce à l’aide d’une icône plus , transmettez la fonction de rappel à la propriété onAddSuggestion.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <Chip label="Date" onAddSuggestion={() => { console.log('Suggestion function triggered'); }} /> </Box>
Puce avec liste déroulante
Si vous souhaitez autoriser l’utilisateur à modifier la valeur d’une puce après avoir réalisé sa sélection initiale, fournissez une fonction de rappel onDropdown de sorte à ouvrir l’interface de sélection dont il a besoin pour apporter des modifications.
const [open, setOpen] = React.useState(false); return ( <Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', stack: 'y', gap: 'medium', }} > <Chip label="Status" value="Succeeded" onDropdown={() => setOpen(!open)} onClose={() => { console.log('Close function triggered'); }} /> {open && ( <Box css={{ font: 'caption', borderRadius: 'medium', backgroundColor: 'container', margin: 'small', padding: 'medium', color: 'secondary', }} > Dropdown contents </Box> )} </Box> )
Représentation de plusieurs valeurs
Lorsque vous renseignez la propriété value du composant Chip dans un tableau de valeurs, les valeurs sont répertoriées dans la puce.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <Chip label="Status" value={['Refunded', 'Succeeded']} onDropdown={() => { console.log('Dropdown function triggered'); }} onClose={() => { console.log('Close function triggered'); }} /> </Box>
Affichage de puces sous forme de liste
Dans de nombreux cas, une puce s’accompagne d’autres puces. Le composant ChipList gère l’espace qui sépare les puces et la mise en forme de ces dernières sous forme de liste. En outre, il permet de naviguer aisément entre les puces à l’aide des touches fléchées gauche et droite du clavier.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <ChipList> <Chip label="Currency" value="USD" onDropdown={() => { console.log('Dropdown function triggered'); }} onClose={() => { console.log('Close function triggered'); }} /> <Chip label="Status" value="Succeeded" onDropdown={() => { console.log('Dropdown function triggered'); }} onClose={() => { console.log('Close function triggered'); }} /> <Chip value="jenny.rosen@stripe.com" onClose={() => { console.log('Closed jenny.rosen'); }} /> <Chip value="usr_0As2kXSWDS1lTZsH5agB" onClose={() => { console.log('Closed usr_0As2kXSWDS1lTZsH5agB'); }} /> <Chip label="Amount" onAddSuggestion={() => { console.log('Add Amount suggestion'); }} /> <Chip label="Date" onAddSuggestion={() => { console.log('Add Date suggestion'); }} /> </ChipList> </Box>
Puce non fermable
Lorsqu’un composant Chip représente une valeur obligatoire, il peut être judicieux de présenter une puce sans icône add ou cancel. Pour présenter les utilisateurs avec une puce non fermable, excluez les rappels onAddSuggestion et onClose.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <ChipList> <Chip label="Amount" value="$10" onDropdown={() => { console.log('Dropdown function triggered'); }} /> <Chip label="Age" value="18-24" onDropdown={() => { console.log('Dropdown function triggered'); }} /> </ChipList> </Box>