# Akkordeonkomponente für Stripe-Apps Verwenden Sie Accordion-Elemente, um lange oder komplexe Inhalte in ausblendbare Abschnitte aufzuteilen. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/accordion?app-sdk-version=8. So fügen Sie Ihrer App die `Accordion` Komponente hinzu: ```js import {Accordion, AccordionItem} from '@stripe/ui-extension-sdk/ui'; ``` Mithilfe von Accordions können Nutzer/innen eine Sammlung schnell durchsuchen, Elemente identifizieren und weitere Details zugreifen, ohne den Kontext zu verlassen, in dem sie arbeiten. Dies ist eine Vorschau einer `Accordion`-Komponente mit drei enthaltenen `AccordionItem`-Komponenten: ### Akkordeon-Eigenschaften | Eigenschaft | Typ | | ----------- | ----------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere `AccordionItem`-Komponenten. | ## AccordionItem `Accordion`-Komponenten enthalten eine oder mehrere `AccordionItem`-Komponenten. ### AccordionItem-Eigenschaften | Eigenschaft | Typ | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `title` | (Pflichtfeld) `React.ReactNode` Ein Titel, der das `AccordionItem` beschreibt. | | `actions` | (Optional) `React.ReactNode` Eine Komponente, die Aktionen enthält, die ein/e Nutzer/in für das `AccordionItem` ausführen kann. Wenn es mehr als 2 Aktionen gibt, verwenden Sie ein Überlaufmenü, um den Rest anzuzeigen. | | `defaultOpen` | (Optional) `boolean | undefined` Gibt an, ob das `AccordionItem` beim ersten Rendern geöffnet sein soll. | | `media` | (Optional) `React.ReactNode` Eine Komponente, die ein optionales `Img` oder `Icon` zur Identifizierung des `AccordionItem` enthält. | | `onChange` | (Optional) `((isOpen: boolean) => void) | undefined` Callback, wenn sich der geöffnete Zustand geändert hat. | | `subtitle` | (Optional) `React.ReactNode` Ein optionaler Untertitel mit zusätzlichen beschreibenden Informationen. | ## Titel und Untertitel Benennen Sie alle `AccordionItem`-Komponenten mit einem `title`, der das Element eindeutig identifiziert. Sie können auch einen optionalen `subtitle` verwenden, um eine Beschreibung oder zusätzliche relevante Informationen anzugeben. ## Medien Die `AccordionItem`-Komponente kann ein Medienelement enthalten, mit dem ein entsprechendes Symbol oder Bild angezeigt wird, das Nutzern/Nutzerinnen dabei hilft, das Element zu identifizieren. Fügen Sie Medien nur dann hinzu, wenn sie Nutzern/Nutzerinnen bei der Identifizierung von Elementen helfen, und wenn es eine enge Verbindung zwischen den Medien und dem Element selbst gibt. ## Aktionen Sie können Aktionen, die für ein Element ausgeführt werden können, mit Schaltflächen oder Links darstellen, die auf der rechten Seite des Accordion-Auslösers platziert werden. ## Elemente deaktivieren Anstatt den Nutzern/Nutzerinnen die Möglichkeit zu nehmen, mit deaktivierten Akkordeon-Elementen zu interagieren, deaktivieren Sie die zugehörigen Aktionen, während Sie den Nutzern/Nutzerinnen weiterhin so viele Informationen wie möglich innerhalb des Elements zur Verfügung stellen. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/accordion?app-sdk-version=9. So fügen Sie Ihrer App die `Accordion` Komponente hinzu: ```js import {Accordion, AccordionItem} from '@stripe/ui-extension-sdk/ui'; ``` Mithilfe von Accordions können Nutzer/innen eine Sammlung schnell durchsuchen, Elemente identifizieren und weitere Details zugreifen, ohne den Kontext zu verlassen, in dem sie arbeiten. Dies ist eine Vorschau einer `Accordion`-Komponente mit drei enthaltenen `AccordionItem`-Komponenten: ### Akkordeon-Eigenschaften | Eigenschaft | Typ | | ----------- | ----------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere `AccordionItem`-Komponenten. | ## AccordionItem `Accordion`-Komponenten enthalten eine oder mehrere `AccordionItem`-Komponenten. ### AccordionItem-Eigenschaften | Eigenschaft | Typ | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `title` | (Pflichtfeld) `React.ReactNode` Ein Titel, der das `AccordionItem` beschreibt. | | `actions` | (Optional) `React.ReactNode` Eine Komponente, die Aktionen enthält, die ein/e Nutzer/in für das `AccordionItem` ausführen kann. Wenn es mehr als 2 Aktionen gibt, verwenden Sie ein Überlaufmenü, um den Rest anzuzeigen. | | `defaultOpen` | (Optional) `boolean | undefined` Gibt an, ob das `AccordionItem` beim ersten Rendern geöffnet sein soll. | | `media` | (Optional) `React.ReactNode` Eine Komponente, die ein optionales `Img` oder `Icon` zur Identifizierung des `AccordionItem` enthält. | | `onChange` | (Optional) `((isOpen: boolean) => void) | undefined` Callback, wenn sich der geöffnete Zustand geändert hat. | | `subtitle` | (Optional) `React.ReactNode` Ein optionaler Untertitel mit zusätzlichen beschreibenden Informationen. | ## Titel und Untertitel Benennen Sie alle `AccordionItem`-Komponenten mit einem `title`, der das Element eindeutig identifiziert. Sie können auch einen optionalen `subtitle` verwenden, um eine Beschreibung oder zusätzliche relevante Informationen anzugeben. ## Medien Die `AccordionItem`-Komponente kann ein Medienelement enthalten, mit dem ein entsprechendes Symbol oder Bild angezeigt wird, das Nutzern/Nutzerinnen dabei hilft, das Element zu identifizieren. Fügen Sie Medien nur dann hinzu, wenn sie Nutzern/Nutzerinnen bei der Identifizierung von Elementen helfen, und wenn es eine enge Verbindung zwischen den Medien und dem Element selbst gibt. ## Aktionen Sie können Aktionen, die für ein Element ausgeführt werden können, mit Schaltflächen oder Links darstellen, die auf der rechten Seite des Accordion-Auslösers platziert werden. ## Elemente deaktivieren Anstatt den Nutzern/Nutzerinnen die Möglichkeit zu nehmen, mit deaktivierten Akkordeon-Elementen zu interagieren, deaktivieren Sie die zugehörigen Aktionen, während Sie den Nutzern/Nutzerinnen weiterhin so viele Informationen wie möglich innerhalb des Elements zur Verfügung stellen. ## 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)