Composant accordéon pour les applications Stripe

Utilisez des accordéons pour diviser du contenu long ou complexe en plusieurs parties réductibles.

Version du SDK

Pour ajouter le composant Accordion à votre application :

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 :

Chargement de l'exemple...

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem title="Apples">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Bananas">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Peaches" subtitle="A subtitle can be provided">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
  </Accordion>
</Box>

Propriétés de l’accordéon

Propriété Type

Propriété	Type
`children`	Obligatoire `React.ReactNode` Un ou plusieurs composants `AccordionItem`.

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.

Chargement de l'exemple...

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem title="Apples">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Bananas">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Oranges">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Peaches" subtitle="A subtitle can be provided">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
  </Accordion>
</Box>

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.

Chargement de l'exemple...

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem
      media={<Icon name="chat" />}
      title="ACH credit transfer"
      subtitle="ACH Credit Transfer enables US customers..."
    >
      <Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
    </AccordionItem>
    <AccordionItem
      title="Cards"
      subtitle="Accept Visa, Mastercard, American Express..."
    >
      <Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
    </AccordionItem>
    <AccordionItem
      title="Apple Pay"
      subtitle="Manage Apple Pay domains and certificates."
    >
      <Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
    </AccordionItem>
  </Accordion>
</Box>

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.

Chargement de l'exemple...

const titles = [
  'Example using a link',
  'Example using a button',
  'Multiple buttons are cool too',
];
const actionExamples = [
  <Link key={0} onPress={() => null}>
    Edit
  </Link>,
  <Button key={1} onPress={() => null}>
    Configure
  </Button>,
  <ButtonGroup key={2}>
    <Button onPress={() => null}>Action 1</Button>
    <Button onPress={() => null}>Action 2</Button>
  </ButtonGroup>,
];

return (
  <Box css={{backgroundColor: 'surface'}}>
    <Accordion>
      {[0, 1, 2].map((i) => (
        <AccordionItem
          title={titles[i]}
          subtitle={i > 2 && 'An optional subtitle can be provided.'}
          actions={actionExamples[i]}
          key={i}
        >
          <Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
        </AccordionItem>
      ))}
    </Accordion>
  </Box>
)

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.

Chargement de l'exemple...

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem
      title="Orangesss"
      actions={
        <Button disabled onPress={() => null}>
          Edit
        </Button>
      }
    >
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
  </Accordion>
</Box>

Composant accordéon pour les applications Stripe

Utilisez des accordéons pour diviser du contenu long ou complexe en plusieurs parties réductibles.

Propriétés de l’accordéon

AccordionItem

Propriétés de l’AccordionItem

Titres et sous-titres

Médias

Actions

Désactivation d’éléments

Voir aussi