ButtonGroup

ButtonGroup を使用して、複数ボタンのレイアウトを処理します。スペースが限られている場合、ボタンはオーバーフローメニューに折りたたまれます。

SDK バージョン

ButtonGroup コンポーネントをアプリに追加するには、以下のようにします。

import {ButtonGroup} from '@stripe/ui-extension-sdk/ui';

<ButtonGroup>
  <Button
    onPress={() => {
      console.log('Filter');
    }}
  >
    Filter
  </Button>
  <Button
    onPress={() => {
      console.log('Export');
    }}
  >
    Export
  </Button>
  <Button type="primary"
    onPress={() => {
      console.log('Save');
    }}
  >
    Save
  </Button>
</ButtonGroup>

ButtonGroup のプロパティ

プロパティー	タイプ
`children`	必須 `React.ReactNode` 1 つ以上の Button コンポーネント。
`collapse`	オプション `("auto" \| "none") \| undefined` オーバーフローせずに表示するための十分なスペースがない場合に、グループ内のボタンを折りたたむかどうかを制御します。
`direction`	オプション `("row" \| "column") \| undefined` ボタングループが拡張する軸を制御します。
`menuTrigger`	オプション `React.ReactNode` オーバーフローメニューに使用されるトリガーエレメントを上書きできるようにします。プレスイベントに対応するコンポーネントであることが必要です。

オーバーフローの折りたたみ

コンテナー内の空きスペースにボタングループが収まるように、ボタンはオーバーフローメニューに折りたたまれます。主要なボタンは他のボタンの後に折りたたまれ、大きいボタンは最初に折りたたまれます。

<ButtonGroup>
  <Button
    onPress={() => {
      console.log('Filter');
    }}
  >
    Filter
  </Button>
  <Button
    onPress={() => {
      console.log('Export');
    }}
  >
    Export
  </Button>
  <Button type="primary"
    onPress={() => {
      console.log('Save');
    }}
  >
    Save
  </Button>
</ButtonGroup>

折りたたみの動作を無効化する

折りたたみ動作を無効にする場合、collapse="none" プロパティー値を指定します。

<ButtonGroup collapse="none">
  <Button
    onPress={() => {
      console.log('Filter');
    }}
  >
    Filter
  </Button>
  <Button
    onPress={() => {
      console.log('Export');
    }}
  >
    Export
  </Button>
  <Button type="primary"
    onPress={() => {
      console.log('Save');
    }}
  >
    Save
  </Button>
</ButtonGroup>

オーバーフローメニューのトリガーをカスタマイズする

デフォルトのオーバーフローメニューのトリガーは、onPress イベントをサポートするエレメントで置き換えることができます。ベストプラクティスに従うには、トリガーエレメントに説明テキストがない場合、適切な aria-label を忘れずに追加します。

<ButtonGroup
  menuTrigger={
    <Button>More actions</Button>
  }
>
  <Button
    onPress={() => {
      console.log('Filter');
    }}
  >
    Filter
  </Button>
  <Button
    onPress={() => {
      console.log('Export');
    }}
  >
    Export
  </Button>
  <Button
    type="primary"
    onPress={() => {
      console.log('Save');
    }}
  >
    Save
  </Button>
</ButtonGroup>