React 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 jqxTabs.

  • jqxTabs Style

  • jqx-widget - applied to jqxTabs.
  • jqx-tabs - applied to jqxTabs.
  • jqx-tabs-close-button - applied to the tab close button.
  • jqx-tabs-close-button-selected - applied to the tab close button when the tab is selected.
  • jqx-tabs-close-button-hover - applied to the tab close button when the mouse is over the tab.
  • jqx-tabs-arrow-left - applied to the tab's left scroll arrow.
  • jqx-tabs-arrow-right - applied to the tab's right scroll arrow.
  • jqx-tabs-arrow-background - applied to the tab's scroll arrows.
  • jqx-tabs-title - applied to the tab's title.
  • jqx-tabs-title-bottom - applied to the tab's title when the 'position' is 'bottom'.
  • jqx-tabs-title a:link - applied to the anchor in tab's title.
  • jqx-tabs-title a:hover
  • jqx-tabs-title a:active
  • jqx-tabs-title a:visited
  • jqx-tabs-title-selected-top - applied to the tab's title when the tab is selected and the jqxTab's position property is set to 'top'
  • jqx-tabs-title-selected-bottom - applied to the tab's title when the tab is selected and the jqxTab's position property is set to 'bottom'
  • jqx-fill-state-pressed - applied to a selected tab.
  • jqx-tabs-title-hover-top - applied to the tab's title when the tab is hovered and the jqxTab's position property is set to 'top'
  • jqx-tabs-title-hover-bottom - applied to the tab's title when the tab is hovered and the jqxTab's position property is set to 'bottom'
  • jqx-fill-state-hover - applied to a hovered tab.
  • jqx-tabs-title-disable - applied to the tab's title when the tab is disabled
  • jqx-tabs-header - applied to the tab's header
  • jqx-widget-header - applied to the tab's header
  • jqx-tabs-header-bottom - applied to the tab's header when the position is bottom
  • jqx-tabs-header-collapsed - applied to the tab's header when the tab is collapsed
  • jqx-tabs-header-collapsed-bottom - applied to the tab's header when the position is bottom and tab is collapsed
  • jqx-tabs-collapsed - applied to the tabs when the 'collapsed' is true.
  • jqx-tabs-collapsed-bottom - applied to the tabs when the 'collapsed' is true and 'position' is bottom.
  • jqx-tabs-selection-tracker-container - applied to the tab's selection tracker container element.
  • jqx-tabs-selection-tracker-top - applied to the tab's selection tracker when the jqxTab's position property is set to 'top'.
  • jqx-tabs-selection-tracker-bottom - applied to the tab's selection tracker when the jqxTab's position property is set to 'bottom'.
  • jqx-tabs-content - applied to the tab's content element which represents a DIV element.
  • jqx-widget-content - applied to the tab's content element which represents a DIV element.
  • jqx-fill-state-disabled - applied to the jqxTabs when it is disabled.
When you create a custom style with colors and backgrounds for jqxtabs, you need to do the following:
  • Add the above CSS classes related to jqxtabs
  • After each CSS class, add your theme name.
    For example:
    jqx-tabs-summer
  • To apply your custom style to jqxtabs, you need to set its 'theme' property(option) to point to your theme name string.