Composant ButtonGroup pour les applications Stripe
Utilisez ButtonGroup pour gérer la mise en page de plusieurs boutons et les réduire en menu de débordement lorsque l'espace est limité.
Pour ajouter le composant ButtonGroup à votre application :
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>
Propriétés de ButtonGroup
| Propriété | Type |
|---|---|
| Obligatoire
One or more |
| Facultatif
Controls whether or not |
| Facultatif
Controls which axis the |
| Facultatif
Permet de remplacer l’élément déclencheur utilisé pour un menu déroulant. Il doit s’agir d’un composant prenant en charge les événements de pression. |
Réduction dans un menu de débordement
Les groupes de boutons s’adaptent à l’espace disponible dans leur conteneur en réduisant les boutons en un menu de débordement. Les boutons primaires sont réduits après tous les autres boutons, tandis que les boutons les plus grands sont réduits en premier.
<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>
Désactiver le comportement de réduction
Si vous souhaitez désactiver le comportement de réduction, vous pouvez spécifier la valeur de la propriété 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>
Personnaliser le déclencheur du menu de débordement
Vous pouvez remplacer le déclencheur par défaut du menu de débordement par n’importe quel élément prenant en charge les événements onPress. Pour vous conformer aux bonnes pratiques, n’oubliez pas d’ajouter un aria-label approprié à votre élément déclencheur s’il ne contient pas de texte descriptif.
<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>