| Name | Type | Default |
|---|
|
count
|
number
|
5
|
Sets or gets images count.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
count={8}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
disabled
|
boolean
|
false
|
Sets or gets whether the rating widget is disabled.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
disabled={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
height
|
string | number
|
auto
|
Sets or gets widget's height.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
height={50}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
itemHeight
|
number
|
auto
|
Sets or gets rating item's height.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
itemHeight={30}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
itemWidth
|
number
|
auto
|
Sets or gets rating item's width.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
itemWidth={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
precision
|
number
|
1
|
Sets or gets vote precision.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
precision={0.5}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
singleVote
|
boolean
|
false
|
Sets or gets whether the user can vote single or multiple times.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
singleVote={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
value
|
number
|
0
|
Sets or gets current rating.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
value={3}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
width
|
string | number
|
auto
|
Sets or gets widget's width.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating}
width={300}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
|
change
|
Event
|
|
The change event is triggered when the rating is changed.
Code examples
Bind to the change event of jqxRating.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public render() {
return (
<JqxRating ref={this.myRating} onChange={this.onChange}
/>
);
}
private onChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
| Name | Arguments | Return Type |
|---|
|
disable
|
None
|
|
Disabling the widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public componentDidMount(): void {
this.myRating.current!.disable();
}
public render() {
return (
<JqxRating ref={this.myRating}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
enable
|
None
|
|
Enabling the widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public componentDidMount(): void {
this.myRating.current!.enable();
}
public render() {
return (
<JqxRating ref={this.myRating}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
getValue
|
None
|
|
Getting current rating value.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public componentDidMount(): void {
this.myRating.current!.getValue();
}
public render() {
return (
<JqxRating ref={this.myRating}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
setValue
|
value
|
|
Setting value to the rating widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public componentDidMount(): void {
this.myRating.current!.setValue(4);
}
public render() {
return (
<JqxRating ref={this.myRating}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
val
|
value
|
|
Sets or gets the value.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
class App extends React.PureComponent<{}, IRatingProps> {
private myRating = React.createRef<JqxRating>();
public componentDidMount(): void {
this.myRating.current!.val();
}
public render() {
return (
<JqxRating ref={this.myRating}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|