Stripe Apps の Menu コンポーネント

Menu には、ユーザーが選択できるアクションのグループが表示されます。多くの場合、このアクションは特定のオブジェクトやコンテキストに関連しています。

SDK バージョン

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>

プロパティータイプ

プロパティー	タイプ
`children`	必須 `React.ReactNode` One or more `MenuGroup` or `MenuItem` components.
`onAction`	オプション `((key: React.Key) => void) \| undefined` アイテムが選択されたときに呼び出されるハンドラー。
`trigger`	オプション `React.ReactNode` The trigger Element to show/hide the `Menu`. Must be a component that supports press events, such as a `Button` or `Link`.

children

必須

React.ReactNode

One or more MenuGroup or MenuItem components.

onAction

オプション

((key: React.Key) => void) | undefined

アイテムが選択されたときに呼び出されるハンドラー。

trigger

オプション

React.ReactNode

The trigger Element to show/hide the Menu. Must be a component that supports press events, such as a Button or Link.

アイテム

メニューには、縦に配置される複数のアイテムが含まれています。

サンプルを読み込み中...

<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 プロパティ

プロパティー	タイプ
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`disabled`	オプション `boolean \| undefined` Marks an item as disabled. Disabled items cannot be selected, focused, or otherwise interacted with.
`id`	オプション `string \| undefined` アイテムの ID。これは `Menu` の `onAction` ハンドラーに渡されます。
`onAction`	オプション `((key: React.Key) => void) \| undefined` アイテムが選択されたときに呼び出されるハンドラー。

グループ

メニューのアイテムをグループに分割できます。

サンプルを読み込み中...

<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 プロパティ

プロパティータイプ

プロパティー	タイプ
`children`	必須 `React.ReactNode` One or more `MenuItem` components.
`title`	オプション `React.ReactNode`

children

必須

React.ReactNode

One or more MenuItem components.

title

オプション

React.ReactNode

イベント

onAction プロパティは、アイテムに対する press イベントを処理するためのコールバックとして使用します。onAction プロパティを Menu に指定して、すべてのアイテムを対象としてアイテムの有効化を処理するか、直接 MenuItem に指定して、個々のアイテムの有効化を処理することができます。

サンプルを読み込み中...

<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>

トリガー

メニューの 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>

注

Stripe Apps の Menu コンポーネント

Menu には、ユーザーが選択できるアクションのグループが表示されます。多くの場合、このアクションは特定のオブジェクトやコンテキストに関連しています。

Menu プロパティ

アイテム

MenuItem プロパティ

グループ

MenuGroup プロパティ

イベント

トリガー

参照情報