ButtonGroup-Komponente für Stripe-Apps
Verwenden Sie ButtonGroup, um das Layout für mehrere Schaltflächen zu verwalten und sie in einem Überlaufmenü zusammenzuklappen, wenn der Platz begrenzt ist.
So fügen Sie Ihrer App die ButtonGroup Komponente hinzu:
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-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
One or more |
| Optional
Controls whether or not |
| Optional
Controls which axis the |
| Optional
Ermöglicht das Überschreiben des Auslöseelements, das für ein Überlaufmenü verwendet wird. Muss eine Komponente sein, die Drückereignisse unterstützt. |
Zusammenklappen des Überlaufs
Schaltflächengruppen passen sich schnell an den verfügbaren Platz in ihrem Container an, indem sie Schaltflächen in einem Überlaufmenü zusammenklappen. Haupt-Schaltflächen werden nach allen anderen Schaltflächen zusammengeklappt, wobei größere Schaltflächen zuerst zusammengeklappt werden.
<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>
Zusammenklappen wird deaktiviert
Wenn Sie das Zusammenklappen deaktivieren möchten, können Sie den Eigenschaftswert collapse="none" angeben.
<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>
Auslöser für das Überlaufmenü anpassen
Der standardmäßige Auslöser für das Überlaufmenü kann durch jedes Element ersetzt werden, das onPress-Ereignisse unterstützt. Um Best Practices einzuhalten, denken Sie daran, Ihrem Trigger-Element ein entsprechendes aria-label hinzuzufügen, wenn es keinen beschreibenden Text enthält.
<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>