<TabbedAccordion> ComponentA <Tabs> component with an <Accordion> inside each tab.
<TabbedAccordionheading="Sample Tabbed Accordion"tabs={[{heading: 'My First Tab',items: [{ heading: 'My Accordion Item', content: 'Example Content' },{ heading: 'Another Accordion Item', content: 'Example Content' }]},{heading: 'Another Tab',items: [{ heading: 'Item One', content: 'Example Content' },{ heading: 'Item Two', content: 'Example Content with <strong>markup</strong>' }]},]}/>
| Name | Description |
|---|---|
headingstring | headline above the accordion |
classNamestring | Optional className to add to the root element |
tabsarray | information about each of the accordion's top level tabs Array members must be of the type below: |
tabs[x]object | Object contains nested props, see below: |
tabs[x].headingstring | heading of the tab |
tabs[x].itemsobject | information about each accordion item within the tab Object contains nested props, see below: |
tabs[x].items.headingstring | heading of the accordion item |
tabs[x].items.contentstring | content of the accordion item |
With product theme accents:
<TabbedAccordionproduct="waypoint"heading="Waypoint Tabbed Accordion"tabs={[{heading: 'My First Tab',items: [{ heading: 'My Accordion Item', content: 'Example Content' },{ heading: 'Another Accordion Item', content: 'Example Content' }]},{heading: 'Another Tab',items: [{ heading: 'Item One', content: 'Example Content' },{ heading: 'Item Two', content: 'Example Content with <strong>markup</strong>' }]},]}/>