`<TabbedAccordion>` Component

A <Tabs> component with an <Accordion> inside each tab.

<TabbedAccordion
  heading="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>' }
      ]
    },
  ]}
/>

<TabbedAccordion
  heading="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

Latest:4.0.4

Search with

Releases

Latest:4.0.4

registry.npmjs.org

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...

Props

Name	Description
`heading` string	headline above the accordion
`tabs` array	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].heading` string	heading of the tab
`tabs[x].items` object	information about each accordion item within the tab Object contains nested props, see below:
`tabs[x].items.heading` string	heading of the accordion item
`tabs[x].items.content` string	content of the accordion item

Examples

With product theme accents:

<TabbedAccordion
  product="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>' }
      ]
    },
  ]}
/>

<TabbedAccordion
  product="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>' }
      ]
    },
  ]}
/>

`<TabbedAccordion>` Component

Code Editor

Where it's used

Releases

Props

Examples

Code Editor

<TabbedAccordion> Component

Code Editor

Where it's used

Releases

Props

Examples

Code Editor

`<TabbedAccordion>` Component