Menü
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>
Props
Prop | Type | Description |
---|---|---|
onAction |
| Handler that is called when an item is selected. |
trigger |
| The trigger Element to show/hide the menu. Must be a component that supports press events, such as a Button or Link. |
Elemente
Menüs enthalten mehrere vertikal angeordnete Elemente.
<Menu aria-label="Menu"> <MenuItem>Edit</MenuItem> <MenuItem disabled>Copy</MenuItem> <MenuItem>Paste</MenuItem> </Menu>
Props
Prop | Type | Description |
---|---|---|
aria-label |
| An accessibility label for this item. |
disabled |
| Marks an item as disabled. Disabled items cannot be selected, focused, or otherwise interacted with. |
id |
| The id of the item. This will be passed into the `onAction` handler of `Menu` |
onAction |
| Handler that is called when an item is selected. |
Gruppen
Sie können Elemente in einem Menü in Gruppen unterteilen.
<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>
Props
Prop | Type | Description |
---|---|---|
aria-label |
| An accessibility label for the group. |
title |
| A heading grouping the menu items. |
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.
<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>
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>