Chip
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:
<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 |
|
Empfohlener Chip
Um dem/der Nutzer/in mit einem plus
-Symbol zu suggerieren, etwas hinzuzufügen, das durch einen Chip dargestellt wird, übergeben Sie eine Callback-Funktion an die Eigenschaft onAddSuggestion
.
<Chip label="Date" onAddSuggestion={() => { alert('Suggestion function triggered'); }} />
Chip mit Dropdown
Wenn Sie Nutzer/innen 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.
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> )} </> ); };
Mehrere Werte darstellen
Wenn Sie die Eigenschaft value
der Chip
-Komponente mit einem Array von Werten füllen, werden diese innerhalb des Chips aufgelistet.
<Chip label="Status" value={['Refunded', 'Succeeded']} onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} />
Chips in einer Liste darstellen
In vielen Fällen werden Chips nicht einzeln präsentiert, 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.
<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>
Nicht verschließbarer Chip
Wenn ein Chip
einen Pflichtwert darstellt, kann es nützlich sein, einen Chip ohne die Symbole add
oder cancel
zu präsentieren. Schließen Sie die Callbacks onAddSuggestion
und onClose
aus, um Nutzer/innen einen nicht verschließbaren Chip zu präsentieren.
<ChipList> <Chip label="Amount" value="$10" /> <Chip label="Age" value="18-24" onDropdown={() => { alert('Dropdown function triggered'); }} /> </ChipList>