Top
ToolBar - Styling & Theming
ToolBar
To style and customize the appearance of <ToolBar />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a <ToolBar /> className - note that this will not override the default <ToolBar /> className of zippy-react-toolkit-tool-bar, but rather will be appended to the classes that the component already has.
ClassNameDescription
zippy-react-toolkit-tool-bar
This is the block className for all toolbars. Always applied.
zippy-react-toolkit-tool-bar--rtl
Applied when rtl=true.
zippy-react-toolkit-tool-bar--arrowScroller
zippy-react-toolkit-tool-bar__inner-wrapper
Applied div that is translated during scroll with arrows.
zippy-react-toolkit-tool-bar__arrow
Applied on scroll arrows.
zippy-react-toolkit-tool-bar__arrow--direction-left
Applied on left scroll arrow.
zippy-react-toolkit-tool-bar__arrow--direction-right
Applied on right scroll arrow.
zippy-react-toolkit-tool-bar__arrow--active
Applied on scroll arrow when mouse is over.
zippy-react-toolkit-tool-bar__arrow--hidden
Applied on scroll arrow when scroll position is at maximum in the direction of that arrow.
zippy-react-toolkit-tool-bar--dropdown