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

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/buttongroup?app-sdk-version=8.

So fügen Sie Ihrer App die `ButtonGroup` Komponente hinzu:

```js
import {ButtonGroup} from '@stripe/ui-extension-sdk/ui';
```

### ButtonGroup-Eigenschaften

| Eigenschaft   | Typ                                                                                                                                                                                                   |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Pflichtfeld)
  `React.ReactNode`

  Eine oder mehrere `Button`-Komponenten.                                                                                                                          |
| `collapse`    | (Optional)
  `("auto" | "none") | undefined`

  Steuert, ob `Buttons` innerhalb der Gruppe eingeklappt werden oder nicht, wenn nicht genügend Platz vorhanden ist, um sie ohne Überlaufen anzuzeigen. |
| `direction`   | (Optional)
  `("row" | "column") | undefined`

  Steuert, welche Achse die `ButtonGroup` umfassen soll.                                                                                               |
| `menuTrigger` | (Optional)
  `React.ReactNode`

  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.

### Zusammenklappen wird deaktiviert

Wenn Sie das Zusammenklappen deaktivieren möchten, können Sie den Eigenschaftswert `collapse="none"` angeben.

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


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/buttongroup?app-sdk-version=9.

So fügen Sie Ihrer App die `ButtonGroup` Komponente hinzu:

```js
import {ButtonGroup} from '@stripe/ui-extension-sdk/ui';
```

### ButtonGroup-Eigenschaften

| Eigenschaft   | Typ                                                                                                                                                                                                   |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Pflichtfeld)
  `React.ReactNode`

  Eine oder mehrere `Button`-Komponenten.                                                                                                                          |
| `collapse`    | (Optional)
  `("auto" | "none") | undefined`

  Steuert, ob `Buttons` innerhalb der Gruppe eingeklappt werden oder nicht, wenn nicht genügend Platz vorhanden ist, um sie ohne Überlaufen anzuzeigen. |
| `direction`   | (Optional)
  `("row" | "column") | undefined`

  Steuert, welche Achse die `ButtonGroup` umfassen soll.                                                                                               |
| `menuTrigger` | (Optional)
  `React.ReactNode`

  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.

### Zusammenklappen wird deaktiviert

Wenn Sie das Zusammenklappen deaktivieren möchten, können Sie den Eigenschaftswert `collapse="none"` angeben.

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


## See also

- [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md)
- [App gestalten](https://docs.stripe.com/stripe-apps/style.md)
- [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)