| Name | Type | Default |
|---|
|
delay
|
Number
|
50
|
Sets or gets the delay property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} delay={100} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} disabled={true} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
height
|
String | Number
|
null
|
Sets or gets the height property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
imgSrc
|
String
|
''
|
Sets or gets the imgSrc property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'} imgHeight={14}
imgWidth={14} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
imgWidth
|
Number
|
16
|
Sets or gets the imgWidth property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} imgPosition={left} imgSrc={https://jqwidgets.com/jquery-widgets-demo/images/andrew.png} imgHeight={14}
imgWidth={14} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
imgHeight
|
Number
|
16
|
Sets or gets the imgHeight property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} imgPosition={left} imgSrc={https://jqwidgets.com/jquery-widgets-demo/images/andrew.png} imgHeight={14}
imgWidth={14} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
imgPosition
|
String
|
'center'
|
Sets or gets the imgPosition property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
roundedCorners
|
String
|
all
|
Sets or gets the roundedCorners property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} roundedCorners={'top'} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} rtl={true} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
textPosition
|
String
|
''
|
Sets or gets the textPosition property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} textPosition={'right'} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
textImageRelation
|
String
|
'overlay'
|
Sets or gets the textImageRelation property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'} textImageRelation={'imageBeforeText'}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} theme={'energyblue'} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
template
|
String
|
'default'
|
Sets or gets the template property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} template={'success'} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
toggled
|
Boolean
|
false
|
Sets or gets the toggled property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} toggled={true} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
width
|
String | Number
|
null
|
Sets or gets the width property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={240} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
value
|
String
|
''
|
Sets or gets the value property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
render() {
return (
<JqxButton ref='myButton' width={120} height={40} value={'Button'} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
|
|
click
|
Event
|
|
This event is triggered when the button is clicked.
Code examples
Bind to the click event of jqxButton.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.myButton.on('click', (event) => {
// Do Something...
});
}
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
|
| Name | Return Type |
|---|
|
check
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.myButton.check();
}
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
destroy
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.myButton.destroy();
}
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
focus
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
render
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.myButton.render();
}
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
toggle
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.myButton.toggle();
}
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
unCheck
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.myButton.unCheck();
}
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
val
|
String
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myButton.val('New Text');
}
render() {
return (
<JqxButton ref='myButton' width={120} height={40} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|