Accordion React Component
Accordion React component represents Framework7’s Accordion component.
Accordion Components
There are following components included:
Accordion
/F7Accordion
AccordionItem
/F7AccordionItem
AccordionToggle
/F7AccordionToggle
AccordionContent
/F7AccordionContent
Accordion Properties
Prop | Type | Default | Description |
---|---|---|---|
<AccordionItem> properties | |||
opened | boolean | Makes accordion item opened |
Accordion Events
Event | Description |
---|---|
<AccordionItem> events | |
accordionBeforeOpen | Event will be triggered right before accordion content starts its opening animation. First handler argument receives prevent function that will prevent accordion from opening when called. |
accordionOpen | Event will be triggered when accordion content starts its opening animation. |
accordionOpened | Event will be triggered after accordion content completes its opening animation. |
accordionBeforeClose | Event will be triggered right before accordion content starts its closing animation. First handler argument receives prevent function that will prevent accordion from closing when called. |
accordionClose | Event will be triggered when accordion content starts its closing animation. |
accordionClosed | Event will be triggered after accordion content completes its closing animation. |
Accordion List
Accordion List is not a separate component, but just a particular case of using <List>
, <ListItem>
and <AccordionContent>
components.
In this case accordion events will be fired on ListItem
.
Examples
export default () => (
<Page>
<Navbar title="Accordion"/>
<BlockTitle>List View Accordion</BlockTitle>
<List accordionList>
<ListItem accordionItem title="Lorem Ipsum">
<AccordionContent>
<Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
</p>
</Block>
</AccordionContent>
</ListItem>
<ListItem accordionItem title="Nested List">
<AccordionContent>
<List>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
<ListItem title="Item 3"></ListItem>
<ListItem title="Item 4"></ListItem>
</List>
</AccordionContent>
</ListItem>
<ListItem accordionItem title="Integer semper">
<AccordionContent>
<Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
</p>
</Block>
</AccordionContent>
</ListItem>
</List>
<BlockTitle>Inset Accordion</BlockTitle>
<List accordionList inset>
<ListItem accordionItem title="Lorem Ipsum">
<AccordionContent>
<Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
</p>
</Block>
</AccordionContent>
</ListItem>
<ListItem accordionItem title="Nested List">
<AccordionContent>
<List>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
<ListItem title="Item 3"></ListItem>
<ListItem title="Item 4"></ListItem>
</List>
</AccordionContent>
</ListItem>
<ListItem accordionItem title="Integer semper">
<AccordionContent>
<Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
</p>
</Block>
</AccordionContent>
</ListItem>
</List>
<BlockTitle>Opposite Side</BlockTitle>
<List accordionList accordionOpposite>
<ListItem accordionItem title="Lorem Ipsum">
<AccordionContent>
<Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
</p>
</Block>
</AccordionContent>
</ListItem>
<ListItem accordionItem title="Nested List">
<AccordionContent>
<List>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
<ListItem title="Item 3"></ListItem>
<ListItem title="Item 4"></ListItem>
</List>
</AccordionContent>
</ListItem>
<ListItem accordionItem title="Integer semper">
<AccordionContent>
<Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
</p>
</Block>
</AccordionContent>
</ListItem>
</List>
<BlockTitle>Custom Collapsible</BlockTitle>
<Block inner accordionList>
{Array.from(Array(3).keys()).map(n => (
<AccordionItem key={n}>
<AccordionToggle><b>Item {n + 1}</b></AccordionToggle>
<AccordionContent>Content {n + 1}</AccordionContent>
</AccordionItem>
))}
</Block>
</Page>
);
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .