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` 1 つ以上の `MenuGroup` コンポーネントまたは `MenuItem` コンポーネント。
`onAction`	オプション `((key: React.Key) => void) \| undefined` アイテムが選択されたときに呼び出されるハンドラー。
`trigger`	オプション `React.ReactNode` `Menu` を表示 / 非表示するトリガーエレメント。`Button` や `Link` など、press イベントに対応するコンポーネントにする必要があります。

children

必須

React.ReactNode

1 つ以上の MenuGroup コンポーネントまたは MenuItem コンポーネント。

onAction

オプション

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

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

trigger

オプション

React.ReactNode

Menu を表示 / 非表示するトリガーエレメント。Button や Link など、press イベントに対応するコンポーネントにする必要があります。

アイテム

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

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

<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` 項目を無効化としてマークします。無効化されたアイテムには、選択、フォーカス、その他の操作はできません。
`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` 1 つ以上の `MenuItem` コンポーネント。
`title`	オプション `React.ReactNode`

children

必須

React.ReactNode

1 つ以上の MenuItem コンポーネント。

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

イベント

トリガー

参照情報