Top
Panel - Styling & Theming
Panel
To style and customize the appearance of Panels, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a <Panel /> className - note that this will not override the default class of zippy-react-toolkit-panel, but rather will be appended to the classes that the component already has.
Below you can find a list with all the CSS classes applied to <Panel /> and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-panel
This is the block className for all Panels. Always applied.
zippy-react-toolkit-panel--title-align-[ALIGN]
Applied with the value of the titleAlign prop.
zippy-react-toolkit-panel--title-bar-position-[POSITION]
Applied with the value of the titleBarPosition prop.
zippy-react-toolkit-panel--rtl
Applied when rtl=true.
zippy-react-toolkit-panel__title
Applied on title.
zippy-react-toolkit-panel__title-rotate-[ROTATION]
Applied on titleRotate.