Top
Window - Styling & Theming
Window
To style and customize the appearance of <Window />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a <Window /> className - note that this will not override the default <Window /> className of zippy-react-toolkit-window, but rather will be appended to the classes the component already has.
Below you can find a list with all the css classes applied to windows and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-window
This is the block className for all windows. Always applied.
zippy-react-toolkit-window--collapsed
Applied on <Window /> body.
zippy-react-toolkit-window--has-iframe
Applied url is used.
zippy-react-toolkit-window--invisible
Applied visible=true.
zippy-react-toolkit-window--rtl
Applied when rtl=true.
zippy-react-toolkit-window--centered
Applied when centered=true.
zippy-react-toolkit-window--centered-vertical
Applied when centered=vertical.
zippy-react-toolkit-window--centered-horizontal
Applied when centered=horizontal.
zippy-react-toolkit-window--maximized
Applied when maximized=horizontal.
zippy-react-toolkit-window--draggable
Applied when draggable=true.
zippy-react-toolkit-window--resizable
Applied when resizable=true.
zippy-react-toolkit-window--maximizable
Applied when maximizable=true.
zippy-react-toolkit-window--focus
Applied when <Window /> has focus.
zippy-react-toolkit-window--maximized
Applied when maximized=true.
zippy-react-toolkit-window--closeable
Applied when closeable=true.
zippy-react-toolkit-window--fixed
zippy-react-toolkit-window--is-top-modal
Applied when modal=true and it is the topmost <Window /> .
zippy-react-toolkit-window--is-top
Applied when it is the topmost <Window />.
zippy-react-toolkit-window__modal-wrapper--fixed
Class added on modal wrapper when <Window /> is relativeToViewport=true.
zippy-react-toolkit-window--modal
Applied when modal=true.
zippy-react-toolkit-window--hover
Applied when mouse is over <Window />.
zippy-react-toolkit-window--shadow
Applied when shadow is specified.
zippy-react-toolkit-window--dragging
Applied when <Window /> is moved by dragging.
zippy-react-toolkit-window--keep-position-centered
zippy-react-toolkit-window--collapsible
Applied when collapsible=true.
zippy-react-toolkit-window--has-transition
Applied when transition=true.
zippy-react-toolkit-window__body
Applied on <Window /> body.
zippy-react-toolkit-window__body--scrollable
Applied on <Window /> body when bodyScrollable=true.
zippy-react-toolkit-window__iframe
Applied rendered iframe, see url.
zippy-react-toolkit-window__proxy
Applied resize proxy, see enableResizeProxy.
zippy-react-toolkit-window__title-bar
Applied titlebar, titlebar is the container that holds the title and the toolBar, see renderTitleBar.
zippy-react-toolkit-window__title
Applied on title.
zippy-react-toolkit-window__title-wrapper
Added on the div that wraps the title, the extra wrapper allows title to have text-overflow=ellipsis.
zippy-react-toolkit-window__tools
Applied on toolbar.
zippy-react-toolkit-window__tool
Applied on buttons inside toolbar.
zippy-react-toolkit-window__close-icon
Applied on closeIcon.
zippy-react-toolkit-window__expand-icon
Applied on expandIcon.
zippy-react-toolkit-window__collapse-icon
Applied on collapseIcon.
zippy-react-toolkit-window__restore-icon
Applied on restoreIcon.
zippy-react-toolkit-window__maximize-icon
Applied on maximizeIcon.
zippy-react-toolkit-window__pin-up-icon
Applied on pinUpIcon.
zippy-react-toolkit-window__pin-down-icon
Applied on pinDownIcon.
zippy-react-toolkit-window__modal-wrapper
The topmost modal has a wrapper div that spans the entire available space, it has a semitransparent background.
zippy-react-toolkit-window__handle
Applied on resize handle.
zippy-react-toolkit-window__handle--t
Applied on top handle.
zippy-react-toolkit-window__handle--b
Applied on bottom handle.
zippy-react-toolkit-window__handle--l
Applied on left handle.
zippy-react-toolkit-window__handle--r
Applied on right handle.
zippy-react-toolkit-window__handle--tl
Applied on top-left handle.
zippy-react-toolkit-window__handle--tr
Applied on top-right handle.
zippy-react-toolkit-window__handle--bl
Applied on bottom-left handle.
zippy-react-toolkit-window__handle--br
Applied on bottom-right handle.