ButtonGroup

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é.

Version du SDK

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
`children`	Obligatoire `React.ReactNode` Un ou plusieurs composants Button.
`collapse`	Facultatif `("auto" \| "none") \| undefined` Controls whether or not buttons within the group collapse when there isn’t enough space to display them without overflowing.
`direction`	Facultatif `("row" \| "column") \| undefined` Controls which axis the button group should span.
`menuTrigger`	Facultatif `React.ReactNode` 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.

<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>

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".

<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>

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.

<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>