ButtonGroup
ButtonGroup を使用して、複数ボタンのレイアウトを処理します。スペースが限られている場合、ボタンはオーバーフローメニューに折りたたまれます。
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>
Props
Prop | Type | Description |
---|---|---|
collapse |
| Controls whether or not buttons within the group collapse when there isn't enough space to display them without overflowing. |
direction |
| Controls which axis the button group should span. |
menuTrigger |
| Allows overriding the trigger element used for an overflow menu. Must be a component that supports press events. |
オーバーフローの折りたたみ
コンテナー内の空きスペースにボタングループが収まるように、ボタンはオーバーフローメニューに折りたたまれます。主要なボタンは他のボタンの後に折りたたまれ、大きいボタンは最初に折りたたまれます。
<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>