Composant de menu pour les applications Stripe
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>
Propriétés du menu
| Propriété | Type |
|---|---|
| Obligatoire
Un ou plusieurs composants |
| Facultatif
Gestionnaire appelé lorsqu’un élément est sélectionné. |
| Facultatif
L’Elément déclencheur pour afficher/masquer le |
Éléments
Les menus contiennent plusieurs éléments disposés verticalement.
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <Menu aria-label="Menu"> <MenuItem>Edit</MenuItem> <MenuItem disabled>Copy</MenuItem> <MenuItem>Paste</MenuItem> </Menu> </Box>
Propriétés MenuItem
| Propriété | Type |
|---|---|
| Obligatoire
Le contenu du composant. |
| Facultatif
Marque un élément comme étant désactivé. Les éléments désactivés ne peuvent pas être sélectionnés, mis en évidence ou faire l’objet d’une autre interaction. |
| Facultatif
Identifiant de l’élément. Celui-ci sera transmis au gestionnaire |
| Facultatif
Gestionnaire appelé lorsqu’un élément est sélectionné. |
Groupes
Vous pouvez diviser les éléments d’un menu en groupes.
<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>
Propriétés MenuGroup
| Propriété | Type |
|---|---|
| Obligatoire
Un ou plusieurs composants |
| Facultatif
|
É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.
<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>
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>