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 jqxKnob.
  • jqx-widget - applied to the widget.
  • jqx-knob - applied to the widget.
  • jqx-knob-label - applied to the knob's labels.

Background

To set fill color and stroke of the Knob, you need to define its style property. Members of the Knob's style object:
  • fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]).
  • stroke - stroke color(hex string).
  • strokeWidth - stroke width(number).

Dial

To set fill color and stroke of the Dial, you need to define its style property. Members of the Dial UI Element's style object:
  • fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]).
  • stroke - stroke color(hex string).
  • strokeWidth - stroke width(number).
The innerRadius and outerRadius properties specify the inner and outer radius of the element.

Spinner

To set fill color and stroke of the Spinner, you need to define its style property. Members of the Spinner UI Element's style object:
  • fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]).
  • stroke - stroke color(hex string).
  • strokeWidth - stroke width(number).
The innerRadius and outerRadius properties specify the inner and outer radius of the element.

Pointer

To set fill color and stroke of the Pointer, you need to define its style property. Members of the Pointer UI Element's style object:
  • fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]).
  • stroke - stroke color(hex string).
  • strokeWidth - stroke width(number).
The type property specifies the pointer's type - "circle", "line", "arrow".

ProgressBar

To set fill color and stroke of the ProgressBar, you need to define its style and background properties. Members of the ProgressBar UI Element's style and background objects:
  • fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]).
  • stroke - stroke color(hex string).
  • strokeWidth - stroke width(number).
  • opacity - defines the fill's opacity. Accepts values from 0 to 1 where 0 is transparent.
The ranges member specify the progress bar's ranges. object.startValue - range start value. range.endValue - range end value. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), object.stroke - border color(hex string), object.strokeWidth - border width, object.opacity - opacity values from 0 to 1.

Marks

To customize the marks appearance, you can use the following members of the marks object.
  • rotate - sets whether spinner marks rotate with pointer.
  • colorProgress - hex color string.
  • colorRemaining - hex color string.
  • drawAboveProgressBar - draws the marks with z-index higher than the progress bar.
  • minorInterval - minor ticks interval.
  • majorInterval - major ticks interval.
  • majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.
  • offset - specifies the labels offset.
  • size - specifies radius in case of circular lines, or length in case of lines.
  • type - "circle" or "line".
  • thickness - specifies thickness in case of lines.
  • visible - determines the labels visibility.
You can define marks object inside the spinner object, too.

Labels

To set the labels color, you need to define the style property and set its fill member to a hex string.