Top
Accordion - Styling & Theming
Accordion
To style and customize the appearance of <Accordion />, you can use one of the following strategies:
  • Specify a style prop with the desired values
  • Specify a className - note that this will not override the default <Accordion /> className of zippy-react-toolkit-accordion, but rather will be appended to the classNames the accordion already has.
In addition, the expand tool has support for rendering icons and easily positioning them. For this, you can use the expandTool and expandToolPosition props to easily get an icon as the expand tool.
Below you can find a list with all the css classes applied to<Accordion /> and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-accordion
This is the block className for all <Accordion /> components. Always applied.
zippy-react-toolkit-accordion--horizontal
Applied when the horizontal prop for the button is true .
zippy-react-toolkit-accordion--vertical
Applied when the <Accordion /> is vertical - which is the default orientation.
zippy-react-toolkit-accordion--ellipsis
Applied when the tabTitleEllipsis is true.
zippy-react-toolkit-accordion--rtl
Applied when rtl is applied.
zippy-react-toolkit-accordion--single-expand
Applied when the <Accordion /> is in the default, single expand mode.
zippy-react-toolkit-accordion--multi-expand
Applied when the <Accordion /> is in the multi expand mode.
zippy-react-toolkit-accordion__tab-title-focused
Applied when the tab is focused.
zippy-react-toolkit-accordion__tab-title-expanded
Applied when the tab is expanded.
zippy-react-toolkit-accordion__tab-title-disabled
Applied when the tab is disabled.
zippy-react-toolkit-accordion__tab-title-locked
Applied when the tab is locked.
zippy-react-toolkit-accordion__tab-title-firstTab
Applied on the first tab.
zippy-react-toolkit-accordion__tab-title-lastTab
Applied on the last tab.
zippy-react-toolkit-accordion--align-[ALIGNMENT]
Applied with the value of the tabTitleAlign prop. The default value for this prop is "start", so zippy-react-toolkit-accordion--align-start is applied.
zippy-react-toolkit-accordion--v-align--[ALIGNMENT]
Applied with the value of the tabTitleVerticalAlign prop. The default value for this prop is "middle", so zippy-react-toolkit-accordion--align-middle is applied.
zippy-react-toolkit-accordion--expand-on-tooltip-only
Applied when expandOnToolOnly is true.