Menükomponente für Stripe-Apps
Ein Menü stellt eine Gruppe von Aktionen dar, aus denen Nutzer/innen wählen können. Diese beziehen sich häufig auf ein bestimmtes Objekt oder einen bestimmten Kontext.
So fügen Sie Ihrer App die Menu Komponente hinzu:
import {Menu, MenuItem, MenuGroup} from '@stripe/ui-extension-sdk/ui';
Ein Standardmenü besteht aus einem das Menü auslösenden Element und einer Reihe von MenuItems.
<Menu trigger={<Button>Menu</Button>}> <MenuItem>Edit</MenuItem> <MenuItem>Copy</MenuItem> <MenuItem>Paste</MenuItem> </Menu>
Menü-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
| Optional
Handler, der aufgerufen wird, wenn ein Element ausgewählt wurde. |
| Optional
Das auslösende Element zum Einblenden/Ausblenden des |
Elemente
Menüs enthalten mehrere vertikal angeordnete Elemente.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <Menu aria-label="Menu"> <MenuItem>Edit</MenuItem> <MenuItem disabled>Copy</MenuItem> <MenuItem>Paste</MenuItem> </Menu> </Box>
MenuItem-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Optional
Markiert ein Element als deaktiviert. Deaktivierte Elemente können nicht ausgewählt oder fokussiert und es kann nicht anderweitig mit ihnen interagiert werden. |
| Optional
Die ID des Elements. Dies wird an den |
| Optional
Handler, der aufgerufen wird, wenn ein Element ausgewählt wurde. |
Gruppen
Sie können Elemente in einem Menü in Gruppen unterteilen.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <Menu aria-label="Menu"> <MenuGroup title="Actions"> <MenuItem>Duplicate</MenuItem> <MenuItem>Edit</MenuItem> <MenuItem>Cancel</MenuItem> </MenuGroup> <MenuGroup title="Connections"> <MenuItem>View customer</MenuItem> <MenuItem>View subscription</MenuItem> </MenuGroup> </Menu> </Box>
MenuGroup-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
| Optional
|
Ereignisse
Verwenden Sie die Eigenschaft onAction als Rückruf, um press-Ereignisse für Elemente zu verarbeiten. Die Eigenschaft onAction kann dem Menu bereitgestellt werden, um die Aktivierung der Elemente für alle Elemente durchzuführen. Alternativ kann die Eigenschaft auch direkt dem MenuItem bereitgestellt werden, um die Aktivierung für einzelne Elemente durchzuführen.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <Menu aria-label="Menu" onAction={(id) => console.log(`Item ${id} was pressed.`)} > <MenuGroup title="Actions"> <MenuItem id="duplicate">Duplicate</MenuItem> <MenuItem id="edit">Edit</MenuItem> <MenuItem id="cancel">Cancel</MenuItem> </MenuGroup> <MenuGroup title="Connections"> <MenuItem id="View customer" onAction={() => console.log('View customer was pressed.')} > View customer </MenuItem> <MenuItem id="View subscription">View subscription</MenuItem> </MenuGroup> </Menu> </Box>
Auslöser
Die Eigenschaft trigger des Menüs funktioniert zusammen mit dem Menü, um den offenen Status des Menüs mit dem angeklickten Status des Auslösers zu verknüpfen.
<Menu trigger={<Button>Menu</Button>}> <MenuGroup title="Actions"> <MenuItem>Duplicate</MenuItem> <MenuItem disabled>Edit</MenuItem> <MenuItem>Cancel</MenuItem> </MenuGroup> <MenuGroup title="Connections"> <MenuItem>View customer</MenuItem> <MenuItem>View subscription</MenuItem> </MenuGroup> </Menu>