<TabbedAccordion> Component
A <Tabs> component with an <Accordion> inside each tab.
Code Editor
<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>' }]},]}/>
Where it's used
0.x.x
Loading 0.x.x releases...1.x.x
Loading 1.x.x releases...2.x.x
Loading 2.x.x releases...3.x.x
Loading 3.x.x releases...4.x.x
Loading 4.x.x releases...5.x.x
Loading 5.x.x releases...Props
| 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 |
Examples
With product theme accents:
Code Editor
<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>' }]},]}/>