Properties

NameTypeDefault
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.

  • size - sets the panel's size.
  • min - sets the panel's minimum size.
  • collapsible - sets whether the panel is collapsible.
  • collapsed - sets whether the panel is collapsed. 
/* 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 collapsed event of 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 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 expanded event of 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 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 resize event of 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 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 resizeStart event of 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 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

NameArgumentsReturn 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);