メニュー
メニューは、ユーザーが選択できるアクションのグループを表示します。多くの場合、このアクションは特定のオブジェクトまたはコンテキストに関連するものです。
Menu
コンポーネントをアプリに追加するには、以下のようにします。
import {Menu, MenuItem, MenuGroup} from '@stripe/ui-extension-sdk/ui';
基本メニューは、メニューをトリガーするエレメントと一連のメニューアイテムで構成されます。
<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. |
アイテム
メニューには、縦に配置される複数のアイテムが含まれています。
<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. |
グループ
メニューのアイテムをグループに分割できます。
<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. |
イベント
onAction
プロパティは、アイテムに対する press
イベントを処理するためのコールバックとして使用します。onAction
プロパティは、Menu
に指定して、すべてのアイテムを対象としてアイテムの有効化を処理するか、直接 MenuItem
に指定して、個々のアイテムの有効化を処理することができます。
<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>
トリガー
メニューの trigger
プロパティはメニューと連動して、メニューが開いている状態をトリガーが押された状態とリンクさせます。
<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>