| Name | Type | Default |
|---|
|
checked
|
boolean
|
false
|
Sets or gets the check state.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
checked={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
disabled
|
boolean
|
false
|
Sets or gets whether the switch button is disabled.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
disabled={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
height
|
string | number
|
null
|
Sets or gets the height.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
height={50}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
orientation
|
SwitchButtonOrientation
|
'horizontal'
|
SwitchButtonOrientation: "horizontal" | "vertical"
Determines the jqxSwitchButton's orientation.
Possible Values:
'horizontal'
'vertical'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
orientation={'vertical'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
onLabel
|
string
|
'On'
|
Sets or gets the string displayed when the button is checked.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
onLabel={'On Label'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
offLabel
|
string
|
'Off'
|
Sets or gets the string displayed when the button is unchecked.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
offLabel={'Off Label'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
thumbSize
|
string
|
'40%'
|
Sets or gets the size of the thumb in percentages.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
thumbSize={'30%'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
rtl
|
boolean
|
false
|
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
rtl={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
width
|
string | number
|
null
|
Sets or gets the width.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
width={50}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
|
checked
|
Event
|
|
This event is triggered when the switch button is checked.
Code examples
Bind to the checked event of jqxSwitchButton.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton} onChecked={this.onChecked}
/>
);
}
private onChecked(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
change
|
Event
|
|
This event is triggered when the switch button's state changes from one state to another.
Code examples
Bind to the change event of jqxSwitchButton.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton} onChange={this.onChange}
/>
);
}
private onChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
unchecked
|
Event
|
|
This event is triggered when the switch button is unchecked.
Code examples
Bind to the unchecked event of jqxSwitchButton.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton} onUnchecked={this.onUnchecked}
/>
);
}
private onUnchecked(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
| Name | Arguments | Return Type |
|---|
|
check
|
None
|
|
Checks the button.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public componentDidMount(): void {
this.mySwitchButton.current!.check();
}
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
disable
|
None
|
|
Disables the switch button.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public componentDidMount(): void {
this.mySwitchButton.current!.disable();
}
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
enable
|
None
|
|
Enables the switch button.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public componentDidMount(): void {
this.mySwitchButton.current!.enable();
}
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
toggle
|
None
|
|
Toggles the check state. This method is automatically called when the user clicks the switch button.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public componentDidMount(): void {
this.mySwitchButton.current!.toggle();
}
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
uncheck
|
None
|
|
Unchecks the button.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public componentDidMount(): void {
this.mySwitchButton.current!.uncheck();
}
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
/>
);
}
}
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 JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
class App extends React.PureComponent<{}, ISwitchButtonProps> {
private mySwitchButton = React.createRef<JqxSwitchButton>();
public componentDidMount(): void {
this.mySwitchButton.current!.val();
}
public render() {
return (
<JqxSwitchButton ref={this.mySwitchButton}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|