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.