Chip-Komponente für Stripe-Apps
Verwenden Sie Chips, um Werte anzuzeigen und Nutzerinnen/Nutzern das Bearbeiten von Werten zu ermöglichen.
So fügen Sie Ihrer App die Chip Komponente hinzu:
import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui';
Dies ist eine Vorschau mehrerer Chip-Komponenten in einer ChipList-Komponente mit unterschiedlichen Eigenschaftskonfigurationen:
<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>
ChipList-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
| Optional
|
Eigenschaften des Chip
| Eigenschaft | Typ |
|---|---|
| Optional
Eine Zeichenfolge, durch die sich der |
| Optional
Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf einen „vorgeschlagenen“ |
| Optional
Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf das Symbol klicken, um einen |
| Optional
Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf die rechte Seite eines aktiven |
| Optional
Der aktuell ausgewählte Wert eines |
Empfohlener Chip
Um dem/der Nutzer/in mit einem plus-Symbol, das durch einen Chip dargestellt wird, die Möglichkeit zu geben, etwas hinzuzufügen, übergeben Sie eine Callback-Funktion an die Eigenschaft onAddSuggestion.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <Chip label="Date" onAddSuggestion={() => { console.log('Suggestion function triggered'); }} /> </Box>
Chip mit Dropdown
Wenn Sie Nutzerinnen/Nutzern erlauben möchten, den Wert eines Chips zu bearbeiten, nachdem sie ihre anfängliche Auswahl getroffen haben, stellen Sie eine onDropdown-Callback-Funktion bereit, um eine Auswahlfläche zu öffnen, die zum Vornehmen von Änderungen erforderlich ist.
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> )
Mehrere Werte darstellen
Wenn Sie die Eigenschaft value der Chip-Komponente mit einem Array von Werten füllen, werden diese innerhalb des Chips aufgelistet.
<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>
Chips in einer Liste darstellen
In vielen Fällen werden Chips nicht einzeln angezeigt, sondern neben anderen Chips. Die ChipList-Komponente sorgt für einen angemessenen Abstand und die Anordnung von Chips in einer Liste sowie eine praktische Tastaturnavigation von Chips unter Verwendung der rechten und linken Pfeiltasten.
<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>
Nicht verschließbarer Chip
Wenn ein Chip einen Pflichtwert darstellt, kann es nützlich sein, einen Chip ohne die Symbole add oder cancel anzuzeigen. Schließen Sie die Callbacks onAddSuggestion und onClose aus, um Nutzerinnen/Nutzern einen nicht verschließbaren Chip anzuzeigen.
<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>