Akkordeonkomponente für Stripe-Apps
Verwenden Sie Accordion-Elemente, um lange oder komplexe Inhalte in ausblendbare Abschnitte aufzuteilen.
So fügen Sie Ihrer App die Accordion Komponente hinzu:
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:
<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>
Akkordeon-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
AccordionItem
Accordion-Komponenten enthalten eine oder mehrere AccordionItem-Komponenten.
AccordionItem-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Pflichtfeld
Ein Titel, der das |
| Optional
Eine Komponente, die Aktionen enthält, die ein/e Nutzer/in für das |
| Optional
Gibt an, ob das |
| Optional
Eine Komponente, die ein optionales |
| Optional
Callback, wenn sich der geöffnete Zustand geändert hat. |
| Optional
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.
<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>
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.
<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>
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.
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> )
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.
<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>