Name | Type | Default |
allowValueChangeOnClick
|
boolean
|
true
|
Sets or gets whether the jqxKnob's value can be changed on click.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} allowValueChangeOnClick={false} allowValueChangeOnDrag={false} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
allowValueChangeOnDrag
|
boolean
|
true
|
Sets or gets whether the jqxKnob's value can be changed by dragging the pointer.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} allowValueChangeOnClick={false} allowValueChangeOnDrag={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
allowValueChangeOnMouseWheel
|
boolean
|
true
|
Sets or gets whether the jqxKnob's value can be changed on mouse wheel.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} allowValueChangeOnMouseWheel={false} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
changing
|
(oldValue: KnobChanging['oldValue'], newValue: KnobChanging['newValue']) => boolean
|
null
|
Interface KnobChanging { oldValue?: number; newValue?: number; }
Sets or gets a function called when the user drags the pointer. The function is called before the pointer is moved and the passed arguments are 2 - oldValue and newValue. If the function returns false, the value will not be changed.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { changing: (oldValue: number, newValue: number): any => { alert( 'changing'); }, styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} changing={this.state.changing} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
dragEndAngle
|
number
|
0
|
Sets or gets the Knob's angle where dragging the pointer will end.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} dragEndAngle={420} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
dragStartAngle
|
number
|
360
|
Sets or gets the Knob's degrees where dragging the pointer can start.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} dragStartAngle={120} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
disabled
|
boolean
|
false
|
Sets or gets whether the Knob is disabled.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} disabled={true} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
dial
|
KnobDial
|
null
|
Interface KnobDial { innerRadius?: any; outerRadius?: any; style?: any; startAngle?: number; endAngle?: number; }
Sets or gets the Knob's dial.
- innerRadius - specifies the inner Radius of the dial.
- outerRadius - specifies the outer Radius of the dial.
- style - specifies the style of the dial. 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]]), style.stroke - border color(hex string), style.strokeWidth - border width.
- startAngle - dial's start angle(optional).
- endAngle - dial's end angle(optional).
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { dial: { innerRadius: '0%', /*specifies the inner Radius of the dial*/ outerRadius: '65%', /*specifies the outer Radius of the dial*/ style: { stroke: '#ff0000', strokeWidth: 1, fill: { color: '#66707e', gradientType: "linear", gradientStops: [[0, 1], [50, 0.4], [100, 1]] } } }, styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} dial={this.state.dial} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
endAngle
|
number
|
360
|
Sets or gets the Knob's degrees offset for the 360 location.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
height
|
number | string
|
400
|
Sets or gets the Knob's height.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} height={400} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
labels
|
KnobLabels
|
null
|
Interface KnobLabelsFormatFunction { formatFunction?: (label: string | number) => string | number; }
Interface KnobLabels { rotate?: any; offset?: number | string; visible?: boolean; step?: number; style?: any; formatFunction?: KnobLabelsFormatFunction['formatFunction']; }
Sets or gets the Knob's labels.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
marks
|
KnobMarks
|
null
|
KnobSpinnerMarksType: "circle" | "line"
Interface KnobMarks { colorProgress?: any; colorRemaining?: any; drawAboveProgressBar?: boolean; minorInterval?: number; majorInterval?: number; majorSize?: number | string; offset?: string; rotate?: boolean; size?: number | string; type?: KnobSpinnerMarksType; thickness?: number; visible?: boolean; }
Sets or gets the Knob's marks.
- 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.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
min
|
number
|
0
|
Sets or gets the Knob's min property.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
max
|
number
|
100
|
Sets or gets the Knob's max property.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
progressBar
|
KnobProgressBar
|
null
|
Interface KnobProgressBar { offset?: number | string; style?: any; size?: number | string; background?: any; ranges?: Array<any>; }
Sets or gets the Knob's progressBar property.
- offset - specifies the progress bar's offset.
- style - specifies the style of the progressBar. 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]]), style.stroke - border color(hex string), style.strokeWidth - border width, style.opacity - opacity values from 0 to 1
- background - specifies the background style of the progressBar. background.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]]), style.stroke - border color(hex string), background.strokeWidth - border width, background.opacity - opacity values from 0 to 1
- size - specifies the progress bar's size.
- ranges - array which 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
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
pointer
|
KnobPointer
|
null
|
Interface KnobPointer { offset?: number | string; type?: string; style?: any; size?: number | string; thickness?: number; visible?: boolean; }
Sets or gets the Knob's pointer property.
- type - specifies the pointer's type - "circle", "line", "arrow".
- style - specifies the style of the pointer. 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]]), style.stroke - border color(hex string), style.strokeWidth - border width.
- size - specifies the pointer's size.
- thickness - specifies the pointer's thickness.
- visible - specifies whether the pointer is visible.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
pointerGrabAction
|
KnobPointerGrabAction
|
"normal"
|
KnobPointerGrabAction: "normal" | "progressBar" | "pointer"
Sets or gets the Knob's pointerGrabAction property("normal", "progressBar", "pointer").
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} pointerGrabAction={ 'pointer'} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
rotation
|
KnobRotation
|
"clockwise"
|
KnobRotation: "clockwise" | "counterclockwise"
Sets or gets the Knob's rotation("clockwise" or "counterclockwise").
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'counterclockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
startAngle
|
number
|
0
|
Sets or gets the Knob's degrees offset for the 0 location.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
spinner
|
KnobSpinner
|
null
|
Interface KnobMarks { colorProgress?: any; colorRemaining?: any; drawAboveProgressBar?: boolean; minorInterval?: number; majorInterval?: number; majorSize?: number | string; offset?: string; rotate?: boolean; size?: number | string; type?: KnobSpinnerMarksType; thickness?: number; visible?: boolean; }
Interface KnobSpinner { innerRadius?: any; outerRadius?: any; style?: any; marks?: KnobMarks; }
Sets or gets Knob's spinner.
- innerRadius - specifies the inner Radius of the spinner.
- outerRadius - specifies the outer Radius of the spinner.
- style - specifies the style of the spinner. 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]]), style.stroke - border color(hex string), style.strokeWidth - border width.
- marks -
- 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.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { spinner: { style: { fill: { color: '#a2da39', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a4e1' }, innerRadius: '45%', /*specifies the inner Radius of the dial*/ outerRadius: '60%', /*specifies the outer Radius of the dial*/ marks: { colorRemaining: '#fff', colorProgress: '#fff', type: 'line', offset: '46%', thickness: 2, size: '14%', majorSize: '14%', majorInterval: 10, minorInterval: 10 }, }, styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} spinner={this.state.spinner} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
styles
|
KnobStyle
|
null
|
Interface KnobStyle { fill?: any; stroke?: string; strokeWidth?: number; }
Sets or gets the Knob's background 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]])
- stroke - border color(hex string).
- strokeWidth - border width.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
step
|
number | string
|
1
|
Sets or gets the Knob's step property. Specifies the increase/decrease step.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} step={10} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
snapToStep
|
boolean
|
true
|
Sets or gets the Knob's snapToStep property. Specifies whether setting the knob value will snap to the closest step true/false.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={false} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
value
|
any
|
0
|
Sets or gets the Knob's value.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
width
|
number | string
|
400
|
Sets or gets the Knob's width.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} width={500} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
change
|
Event
|
|
This event is triggered when the value is changed.
Code examples
Bind to the change event of jqxKnob.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; } public render() { return ( <JqxKnob ref={this.myKnob} onChange={this.onChange} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } private onChange(e: Event): void { alert( 'do something...'); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
Name | Arguments | Return Type |
destroy
|
None
|
|
Destroys the widget.
/* CSSStylesheet.css */ text.jqx-knob-label { font-size: 20px; }
/* End CSSStylesheet.css */ /* tslint:disable */ import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import './CSSStylesheet.css'; import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob'; class App extends React.PureComponent <{}, IKnobProps> { private myKnob = React.createRef <JqxKnob>(); constructor(props: {}) { super(props); this.state = { styles: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }, marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#00a4e1', border: '#00a4e1' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 }, labels: { offset: '88%', step: 10, visible: true }, progressBar: { style: { fill: '#00a4e1', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } }, pointer: { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } } } public componentDidMount(): void { this.myKnob.current!.styles = this.styles; this.myKnob.current!.destroy(); } public render() { return ( <JqxKnob ref={this.myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={ 'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar} marks={this.state.marks} labels={this.state.labels} /> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
val
|
value
|
|
|