# Composant accordéon pour les applications Stripe Utilisez des accordéons pour diviser du contenu long ou complexe en plusieurs parties réductibles. # 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. Pour ajouter le composant `Accordion` à votre application : ```js import {Accordion, AccordionItem} from '@stripe/ui-extension-sdk/ui'; ``` Les accordéons permettent à l’utilisateur de passer rapidement en revue plusieurs sections de contenu, d’identifier des éléments et d’accéder à davantage d’informations sans quitter la fenêtre contextuelle. Voici un aperçu d’un composant `Accordion` avec trois composants `AccordionItem` à l’intérieur : ### Propriétés de l’accordéon | Propriété | Type | | ---------- | -------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `AccordionItem`. | ## AccordionItem Les composants `Accordion` contiennent un ou plusieurs composants `AccordionItem`. ### Propriétés de l’AccordionItem | Propriété | Type | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `title` | (Obligatoire) `React.ReactNode` Un titre décrivant l’`AccordionItem`. | | `actions` | (Facultatif) `React.ReactNode` Composant contenant les actions que l’utilisateur peut effectuer sur l’`AccordionItem`. S’il y a plus de deux actions, utilisez un menu de débordement pour afficher le reste. | | `defaultOpen` | (Facultatif) `boolean | undefined` Indique si l’`AccordionItem` doit être ouvert ou non lors du premier rendu. | | `media` | (Facultatif) `React.ReactNode` Composant contenant une `Img` ou une `Icon` facultative pour aider à identifier l’`AccordionItem`. | | `onChange` | (Facultatif) `((isOpen: boolean) => void) | undefined` Rappel lorsque l’état d’ouverture a changé. | | `subtitle` | (Facultatif) `React.ReactNode` Un sous-titre facultatif contenant des informations descriptives supplémentaires. | ## Titres et sous-titres Indiquez un `title` pour tous les composants `AccordionItem` afin de les identifier de manière unique. Vous pouvez également utiliser un `subtitle` facultatif pour fournir une description ou des informations pertinentes supplémentaires. ## Médias Le composant `AccordionItem` peut contenir un élément média pour afficher une icône ou une image pertinente qui aide l’utilisateur à identifier l’élément. Si vous choisissez d’en intégrer à votre composant, les images choisies doivent permettre de distinguer les éléments les uns des autres et présenter un lien évident avec les ressources qu’elles représentent. ## Actions Vous pouvez représenter les actions réalisables par un élément avec des boutons ou des liens placés sur le côté droit du déclencheur de l’accordéon. ## Désactivation d’éléments Plutôt que d’interdire à un utilisateur d’interagir avec les éléments désactivés d’un accordéon, désactivez les actions associées tout en lui présentant autant d’informations que possible dans l’élément. # 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. Pour ajouter le composant `Accordion` à votre application : ```js import {Accordion, AccordionItem} from '@stripe/ui-extension-sdk/ui'; ``` Les accordéons permettent à l’utilisateur de passer rapidement en revue plusieurs sections de contenu, d’identifier des éléments et d’accéder à davantage d’informations sans quitter la fenêtre contextuelle. Voici un aperçu d’un composant `Accordion` avec trois composants `AccordionItem` à l’intérieur : ### Propriétés de l’accordéon | Propriété | Type | | ---------- | -------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `AccordionItem`. | ## AccordionItem Les composants `Accordion` contiennent un ou plusieurs composants `AccordionItem`. ### Propriétés de l’AccordionItem | Propriété | Type | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `title` | (Obligatoire) `React.ReactNode` Un titre décrivant l’`AccordionItem`. | | `actions` | (Facultatif) `React.ReactNode` Composant contenant les actions que l’utilisateur peut effectuer sur l’`AccordionItem`. S’il y a plus de deux actions, utilisez un menu de débordement pour afficher le reste. | | `defaultOpen` | (Facultatif) `boolean | undefined` Indique si l’`AccordionItem` doit être ouvert ou non lors du premier rendu. | | `media` | (Facultatif) `React.ReactNode` Composant contenant une `Img` ou une `Icon` facultative pour aider à identifier l’`AccordionItem`. | | `onChange` | (Facultatif) `((isOpen: boolean) => void) | undefined` Rappel lorsque l’état d’ouverture a changé. | | `subtitle` | (Facultatif) `React.ReactNode` Un sous-titre facultatif contenant des informations descriptives supplémentaires. | ## Titres et sous-titres Indiquez un `title` pour tous les composants `AccordionItem` afin de les identifier de manière unique. Vous pouvez également utiliser un `subtitle` facultatif pour fournir une description ou des informations pertinentes supplémentaires. ## Médias Le composant `AccordionItem` peut contenir un élément média pour afficher une icône ou une image pertinente qui aide l’utilisateur à identifier l’élément. Si vous choisissez d’en intégrer à votre composant, les images choisies doivent permettre de distinguer les éléments les uns des autres et présenter un lien évident avec les ressources qu’elles représentent. ## Actions Vous pouvez représenter les actions réalisables par un élément avec des boutons ou des liens placés sur le côté droit du déclencheur de l’accordéon. ## Désactivation d’éléments Plutôt que d’interdire à un utilisateur d’interagir avec les éléments désactivés d’un accordéon, désactivez les actions associées tout en lui présentant autant d’informations que possible dans l’élément. ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)