Puce
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é :
<ChipList> <Chip label="Currency" value="USD" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Status" value="Succeeded" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Amount" onAddSuggestion={() => { alert('Add Amount suggestion'); }} /> <Chip label="Date" onAddSuggestion={() => { alert('Add Date suggestion'); }} /> </ChipList>
Props
Prop | Type |
---|---|
label |
|
onAddSuggestion |
|
onClose |
|
onDropdown |
|
value |
|
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
.
<Chip label="Date" onAddSuggestion={() => { alert('Suggestion function triggered'); }} />
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.
import {useState} from 'react'; import {Box, Chip} from '@sail/ui/deprecated'; const WithDropdown = () => { const [open, setOpen] = useState(false); return ( <> <Chip label="Status" value="Succeeded" onDropdown={() => setOpen(!open)} onClose={() => { alert('Close function triggered'); }} /> {open && ( <Box css={{ font: 'caption', borderRadius: 'medium', background: 'container', margin: 'small', padding: 'medium', color: 'secondary', }} > Dropdown contents </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.
<Chip label="Status" value={['Refunded', 'Succeeded']} onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} />
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.
<ChipList> <Chip label="Currency" value="USD" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Status" value="Succeeded" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip value="jenny.rosen@stripe.com" onClose={() => { alert('Closed jenny.rosen'); }} /> <Chip value="usr_0As2kXSWDS1lTZsH5agB" onClose={() => { alert('Closed usr_0As2kXSWDS1lTZsH5agB'); }} /> <Chip label="Amount" onAddSuggestion={() => { alert('Add Amount suggestion'); }} /> <Chip label="Date" onAddSuggestion={() => { alert('Add Date suggestion'); }} /> </ChipList>
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
.
<ChipList> <Chip label="Amount" value="$10" /> <Chip label="Age" value="18-24" onDropdown={() => { alert('Dropdown function triggered'); }} /> </ChipList>