TabPanel

A simple tab panel that is AMP-compatible. Tab names are pull from the label prop of the child elements.
Any type of element can be a child.

Example:

<TabPanel> <div label="Description"> Description here </div> <CmsSlot label="Instructions"> { instructionsFromCms } </CmsSlot> </TabPanel>
Import
import TabPanel from 'react-storefront/TabPanel'

Props

NameTypeDefaultDescription
scrollablebooltrue

Set to false to prevent the tabs from scrolling

selectednumber0

Selected tab index

onChangefunc

On change callback

ampStateId'moovAmpState'
ampStateProperty'selectedTab'

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • panel
  • hidden
  • ampSelector
  • ampPanel
  • ampTab
  • ampTabLabelContainer
  • ampTabIndicator