Menu
Un menu présente un groupe d'actions parmi lesquelles l'utilisateur peut choisir, souvent liées à un objet ou à un contexte particulier.
Pour ajouter le composant Menu
à votre application :
import {Menu, MenuItem, MenuGroup} from '@stripe/ui-extension-sdk/ui';
Un menu de base est composé d’un élément destiné à déclencher le menu et d’une série de 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. |
Éléments
Les menus contiennent plusieurs éléments disposés verticalement.
<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. |
Groupes
Vous pouvez diviser les éléments d’un menu en groupes.
<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. |
Événements
Utilisez la propriété onAction
comme rappel pour gérer les événements press
sur les éléments. Vous pouvez fournir cette onAction
au Menu
pour gérer l’activation de tous les éléments, ou directement au MenuItem
pour gérer l’activation de certains éléments.
<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>
Déclencheurs
La propriété trigger
du menu fonctionne avec celui-ci pour associer l’état ouvert du menu à l’état enfoncé d’un déclencheur.
<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>