Top
TabPanel - Styling & Theming
TabPanel
To style and customize the appearance of <TabPanel />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a TabPanel className - note that this will not override the default <TabPanel /> className of zippy-react-toolkit-tab-panel, but rather will be appended to the classes the <TabPanel /> already has.
ClassNameDescription
zippy-react-toolkit-tab-panel
This is the block className for all tabpanels. Always applied.
zippy-react-toolkit-tab-panel--orientation-vertical
Applied whether vertical=true.
zippy-react-toolkit-tab-panel--orientation-horizontal
Applied whether vertical=false.
zippy-react-toolkit-tab-panel--tab-align-[TAB_ALIGN]
Applied with the value of tabAlign.
zippy-react-toolkit-tab-panel--tab-position-[TAB_POSITION]
Applied with the value of tabPosition.
zippy-react-toolkit-tab-panel__tab-strip
Applied on TabStrip subcomponent.
zippy-react-toolkit-tab-panel__tab-strip--orientation-vertical
Applied on TabStrip whether vertical=true.
zippy-react-toolkit-tab-panel__tab-strip--orientation-horizontal
Applied on TabStrip whether vertical=false.
zippy-react-toolkit-tab-panel__tab-strip--tab-align-[TAB_ALIGN]
Applied on TabStrip with the value of tabAlign.
zippy-react-toolkit-tab-panel__tab-strip--tab-position-[TAB_POSITION]
Applied on TabStrip with the value of tabPosition.
zippy-react-toolkit-tab-panel__tab-strip--focused
Applied on TabStrip when it has focus. .
zippy-react-toolkit-tab-panel__tab-strip--vertical
Applied on TabStrip when vertical=true.
zippy-react-toolkit-tab-panel__tab-strip--first-active
Applied on TabStrip when first tab is active.
zippy-react-toolkit-tab-panel__tab-strip--last-active
Applied on TabStrip when last tab is active.
zippy-react-toolkit-tab-panel__body
Applied on TabBody subcomponent.
zippy-react-toolkit-tab-panel__body--orientation-vertical
Applied on TabBody whether vertical=true.
zippy-react-toolkit-tab-panel__body--orientation-horizontal
Applied on TabBody whether vertical=false.
zippy-react-toolkit-tab-panel__body--tab-align-[TAB_ALIGN]
Applied on TabBody with the value of tabAlign.
zippy-react-toolkit-tab-panel__body--tab-position-[TAB_POSITION]
Applied on TabBody with the value of tabPosition.
zippy-react-toolkit-tab-panel__body--transition
Applied on TabBody when transition=true.
zippy-react-toolkit-tab-panel__body--transitioning
Applied on TabBody during transition.
zippy-react-toolkit-tab-panel__tab-title
Applied on tabTitle.
zippy-react-toolkit-tab-panel__tab-title--first
Applied on tabTitle when it is first.
zippy-react-toolkit-tab-panel__tab-title--first
Applied on tabTitle when it is last.
zippy-react-toolkit-tab-panel__tab-title--vertical
Applied on tabTitle when vertical=true.
zippy-react-toolkit-tab-panel__tab-title--ellipsis
Applied on tabTitle when tabEllipsis=true.
zippy-react-toolkit-tab-panel__tab-title--active
Applied on tabTitle when it is active.
zippy-react-toolkit-tab-panel__tab-title--active
Applied on tabTitle when it is disabled.