| Name | Type | Default |
|---|---|---|
| disabled | boolean | false |
|
Sets or gets the disabled property. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600} disabled={true}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| height | string | number | 300 |
|
Sets or gets the jqxSplitter's height. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| orientation | SplitterOrientation | 'vertical' |
|
SplitterOrientation: "horizontal" | "vertical"
Sets or gets the orientation property. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600} orientation={'horizontal'}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| panels | Array<SplitterPanel> | [] |
|
Interface SplitterPanel {
size?: number | string; min?: number | string; collapsible?: boolean; collapsed?: boolean; } Sets or gets the panels property.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
constructor(props: {}) {
super(props);
this.state = {
panels: [{ size: 100 }, { size: 200 }]
}
}
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600} panels={this.state.panels}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| resizable | boolean | true |
|
Sets or gets the resizable property. When this property is set to false, the user will not be able to move the split bar. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600} resizable={false}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| splitBarSize | number | 5 |
|
Sets or gets the size of the split bar. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600} splitBarSize={10}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| showSplitBar | boolean | true |
|
Sets or gets whether the split bar is displayed. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600} showSplitBar={false}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| theme | string | '' |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600} theme={'material'}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| width | string | number | 300 |
|
Sets or gets the jqxSplitter's width. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| collapsed | Event | |
|
This event is triggered when a panel is collapsed. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter} onCollapsed={this.onCollapsed}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
private onCollapsed(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| expanded | Event | |
|
This event is triggered when a panel is expanded. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter} onExpanded={this.onExpanded}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
private onExpanded(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| resize | Event | |
|
This event is triggered when the 'resize' operation has ended. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter} onResize={this.onResize}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
private onResize(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| resizeStart | Event | |
|
This event is triggered when the 'resizeStart' operation has started. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public render() {
return (
<JqxSplitter ref={this.mySplitter} onResizeStart={this.onResizeStart}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
private onResizeStart(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| collapse | None | |
|
Collapse a panel. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public componentDidMount(): void {
this.mySplitter.current!.collapse();
}
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| destroy | None | |
|
Destroys the jqxSplitter. This method will remove the jqxSplitter from the DOM and will remove all internal event handlers and styles. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public componentDidMount(): void {
this.mySplitter.current!.destroy();
}
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| disable | None | |
|
Disables the jqxSplitter. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public componentDidMount(): void {
this.mySplitter.current!.disable();
}
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| enable | None | |
|
Enables the jqxSplitter. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public componentDidMount(): void {
this.mySplitter.current!.enable();
}
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| expand | None | |
|
Expands a panel. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public componentDidMount(): void {
this.mySplitter.current!.expand();
}
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| render | None | |
|
Renders the jqxSplitter. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public componentDidMount(): void {
this.mySplitter.current!.render();
}
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| refresh | None | |
|
Refreshes the jqxSplitter. This method will perform a layout and will arrange the split panels. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
class App extends React.PureComponent<{}, ISplitterProps> {
private mySplitter = React.createRef<JqxSplitter>();
public componentDidMount(): void {
this.mySplitter.current!.refresh();
}
public render() {
return (
<JqxSplitter ref={this.mySplitter}
width={600} height={600}>
<div>Left Side</div>
<div>Right Side</div>
</JqxSplitter>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||