Vue UI Components Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxDockingLayout.
  • jqx-docking-layout - applied to the jqxDockingLayout.
  • jqx-layout - applied to the jqxDockingLayout.
  • jqx-widget - applied to the jqxDockingLayout.
  • jqx-widget-content - applied to the jqxDockingLayout.
  • jqx-rc-all - applied to the jqxDockingLayout.
  • jqx-layout-group-root - applied to the root layout group.
  • jqx-layout-group-default - applied to layout groups.
  • jqx-layout-group-document - applied to document groups.
  • jqx-layout-group-tabbed - applied to tabbed groups.
  • jqx-layout-group-auto-hide - applied to auto hide groups.
  • jqx-layout-group-auto-hide-content-horizontal - applied to the content sections of horizontally-aligned auto hide groups.
  • jqx-layout-group-auto-hide-content-vertical - applied to the content sections of vertically-aligned auto hide groups.
  • jqx-docking-layout-group-floating - applied to float groups.
  • jqx-layout-pseudo-window - applied to pseudo-jqxWindows in tabbed and auto hide groups.
  • jqx-layout-pseudo-window-header - applied to pseudo-jqxWindow headers.
  • jqx-layout-pseudo-window-title - applied to pseudo-jqxWindow titles.
  • jqx-layout-pseudo-window-pin-icon - applied to pseudo-jqxWindow pin icons.
  • jqx-layout-pseudo-window-pinned-icon - applied to pseudo-jqxWindow unpin icons.
  • jqx-layout-pseudo-window-close-icon - applied to pseudo-jqxWindow close icons.
  • jqx-layout-pseudo-window-content - applied to pseudo-jqxWindow content sections.
  • jqx-layout-resize-feedback - applied to the horizontal and vertical resize feedbacks.
  • jqx-layout-resize-feedback-horizontal - applied to the horizontal resize feedback.
  • jqx-layout-resize-feedback-vertical - applied to the vertical resize feedback.
  • jqx-layout-resize-feedback-warning - applied to the resize feedbacks when a minimum width has been reached.
  • jqx-docking-layout-overlay - applied to the overlay with squares which appears when a float group is dragged (drag overlay).
  • jqx-docking-layout-overlay-square - applied to the squares in the drag overlay.
  • jqx-docking-layout-square-disabled - applied to squares in the drag overlay to indicate a drop operation is not allowed.
  • jqx-docking-layout-overlay-inner-square - applied to the inner, dialog-resembling, squares in the drag overlay.
  • jqx-docking-layout-overlay-inner-square-header - applied to the header of the drag overlay inner squares and the "mini windows" of edge squares.
  • jqx-docking-layout-overlay-inner-square-content - applied to the content of the drag overlay inner squares and the "mini windows" of edge squares.
  • jqx-docking-layout-overlay-highlight - applied to the highlighted part of the content of the drag overlay inner squares.
  • jqx-docking-layout-drop-overlay - applied to the overlay which appears when a float group is about to be docked.
  • jqx-docking-layout-overlay-square-edge - applied to the squares which appear at the left, right, top and bottom of the widget when a float group is dragged.
  • jqx-docking-layout-overlay-mini-window-edge-horizontal - applied to the inner, dialog-resembling, squares in the left and right edge squares.
  • jqx-docking-layout-overlay-mini-window-edge-vertical - applied to the inner, dialog-resembling, squares in the top and bottom edge squares.
  • jqx-docking-layout-overlay-inner-square-content-horizontal - applied to the content of the "mini windows" of the left and right edge squares.
  • jqx-docking-layout-overlay-inner-square-content-vertical - applied to the content of the "mini windows" of the top and bottom edge squares.
  • jqx-docking-layout-overlay-square-edge-arrow - applied to the arrows of the edge squares.
When you create a custom style with colors and backgrounds for jqxDockingLayout, you need to do the following:
  • Add the above CSS classes related to jqxDockingLayout
  • After each CSS class, add your theme name.
    For example:
    jqx-docking-layout-energyblue
  • To apply your custom style to jqxDockingLayout, you need to set its 'theme' property (option) to point to your theme name string: