Stripe Apps の 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>
ButtonGroup のプロパティ
| プロパティー | タイプ |
|---|---|
| 必須
1 つ以上の |
| オプション
オーバーフローせずに表示するための十分なスペースがない場合に、グループ内の |
| オプション
|
| オプション
オーバーフローメニューに使用されるトリガーエレメントを上書きできるようにします。プレスイベントに対応するコンポーネントであることが必要です。 |
オーバーフローの折りたたみ
コンテナー内の空きスペースにボタングループが収まるように、ボタンはオーバーフローメニューに折りたたまれます。主要なボタンは他のボタンの後に折りたたまれ、大きいボタンは最初に折りたたまれます。
サンプルを読み込み中...
<Box css={{width: 'fill'}}> <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> </Box>
折りたたみの動作を無効化する
折りたたみ動作を無効にする場合、collapse="none" プロパティー値を指定します。
サンプルを読み込み中...
<Box css={{width: 'fill'}}> <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> </Box>
オーバーフローメニューのトリガーをカスタマイズする
デフォルトのオーバーフローメニューのトリガーは、onPress イベントをサポートするエレメントで置き換えることができます。ベストプラクティスに従うには、トリガーエレメントに説明テキストがない場合、適切な aria-label を忘れずに追加します。
サンプルを読み込み中...
<Box css={{width: 'fill'}}> <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> </Box>