export default () => (<Accordion><AccordionItem><AccordionHeader><AccordionTrigger><AccordionIcon /></AccordionTrigger></AccordionHeader><AccordionContent /></AccordionItem></Accordion>)
Prop | Type | Default | Description |
---|---|---|---|
type | "single" | "multiple" | - | Determines whether one or multiple items can be opened at the same time. |
isCollapsible | boolean | false | When type is "single", allows closing content when clicking trigger for an open item. |
defaultValue | string[] | [] | The value of the item to expand when initially rendered when type is "multiple". Use when you do not need to control the state of the items. |
value | string[] | [] | The controlled value of the item to expand when type is "multiple". Must be used in conjunction with onValueChange. |
onValueChange | function | - | Event handler called when the expanded state of an item changes and type is "single". |
isDisabled | boolean | false | When true, prevents the user from interacting with the accordion and all its items. |
orientation | "horizontal" | "vertical" | "vertical" | The orientation of the accordion. |
Prop | Type | Default | Description |
---|---|---|---|
value | string[] | [] | The controlled value of the item to expand when type is "multiple". Must be used in conjunction with onValueChange. |
isDisabled | boolean | false | When true, prevents the user from interacting with the accordion and all its items. |
// import the styled componentsimport {Root,Header,Trigger,Content,Item,Icon,} from "../components/core/accordion/styled-components"// import the createAccordion functionimport { createAccordion } from "@gluestack-ui/accordion"// Understanding the APIexport const Accordion = createAccordion({Root,Header,Trigger,Content,Item,Icon,})// Using the accordion componentexport default () => (<Accordion><AccordionItem><AccordionHeader><AccordionTrigger><Text>Accordion Item 1</Text><AccordionIcon><AddIcon /></AccordionIcon></AccordionTrigger></AccordionHeader><AccordionContent><Text>Accordion Content 1</Text></AccordionContent></AccordionItem>{/* ... */}<AccordionItem><AccordionHeader><AccordionTrigger><Text>Accordion Item 4</Text><AccordionIcon><AddIcon /></AccordionIcon></AccordionTrigger></AccordionHeader><AccordionContent><Text>Accordion Content 4</Text></AccordionContent></AccordionItem></Accordion>)