React UI Components Documentation

Sets or gets the animation type of switching tabs.

'none'

'fade'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} animationType={'fade'}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the jqxTabs header's height will be equal to the item with max height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} autoHeight={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the close button size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} showCloseButtons={true} closeButtonSize={20}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the collapsible feature.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} collapsible={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration of the content's fade animation which occurs when the user selects a tab. This setting has effect when the 'animationType' is set to 'fade'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} animationType={'fade'} contentTransitionDuration={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the jqxTabs widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} disabled={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the tabs hover effect.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} enabledHover={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the scroll animation is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={100} height={150} enableScrollAnimation={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the drop animation is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} reorder={true} enableDropAnimation={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function that the tab calls when a content panel needs to be initialized.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      initTabContent: (): any => {
        jqwidgets.createInstance('#button', 'jqxButton', { width: 80, height: 50 });
      }
    }
  }  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} initTabContent={this.state.initTabContent}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the keyboard navigation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} keyboardNavigation={false}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the tabs are positioned at 'top' or 'bottom.

'top'

'bottom'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} position={'bottom'}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the reorder feature. When this feature is enabled, the end-user can drag a tab and drop it over another tab. As a result the tabs will be reordered.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} reorder={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} rtl={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration of the scroll animation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={100} height={150} scrollAnimationDuration={3000}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets selected tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} selectedItem={1}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the selection tracker is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} selectionTracker={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the scrolling is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={100} height={150} scrollable={false}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the position of the scroll arrows.

'left'

'right'

'both'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={100} height={150} scrollPosition={'both'}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the scrolling step.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={100} height={150} scrollStep={10}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether a close button is displayed in each tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} showCloseButtons={true}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets user interaction used for switching the different tabs.

'click'

'dblclick'

'mouseenter'

'none'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} toggleMode={'dblclick'}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150} theme={'material'}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300} height={150}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a new tab is added to the jqxTabs.

Code examples

Bind to the add event of jqxTabs.

Theis event is triggered when any tab is collapsed.

Code examples

Bind to the collapsed event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.setOptions({ collapsible: true });
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onCollapsed={this.onCollapsed} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onCollapsed(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the drag operation started.

Code examples

Bind to the dragStart event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.setOptions({ reorder: true });
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onDragStart={this.onDragStart} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onDragStart(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the drag operation ended.

Code examples

Bind to the dragEnd event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.setOptions({ reorder: true });
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onDragEnd={this.onDragEnd} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onDragEnd(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when any tab is expanded.

Code examples

Bind to the expanded event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.setOptions({ collapsible: true });
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onExpanded={this.onExpanded} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onExpanded(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a tab is removed.

Code examples

Bind to the removed event of jqxTabs.

This event is triggered when the user selects a tab. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback.

Code examples

Bind to the selecting event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onSelecting={this.onSelecting} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onSelecting(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user selects a new tab.

Code examples

Bind to the selected event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onSelected={this.onSelected} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onSelected(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user click a tab. You can retrieve the clicked tab's index.

Code examples

Bind to the tabclick event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onTabclick={this.onTabclick} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onTabclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user selects a tab. The last selected tab is going to become unselected. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback.

Code examples

Bind to the unselecting event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onUnselecting={this.onUnselecting} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onUnselecting(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user selects a tab. The last selected tab becomes unselected.

Code examples

Bind to the unselected event of jqxTabs.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();  
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} onUnselected={this.onUnselected} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
 
  private onUnselected(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adding tab at indicated position.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.addAt(1,'Title','Content');
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adding tab at the beginning.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.addFirst('Title','Content');
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adding tab at the end.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.addLast('Title','Content');
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Collapsing the current selected tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.collapse();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.disable();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disabling tab with indicated index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.disableAt(1);
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method is ensuring the visibility of item with indicated index. If the item is currently not visible the method is scrolling to it.

Enabling tab with indicated index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.enableAt(1);
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Expanding the current selected tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.expand();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.enable();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the title of a Tab. The returned value is a "string".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.getTitleAt(1);
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the content of a Tab. The returned value is a HTML Element.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.getContentAt(1);
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Method: getDisabledTabsCount

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.getDisabledTabsCount();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Hiding a close button at a specific position.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.hideCloseButtonAt(1);
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Hiding all close buttons.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.hideAllCloseButtons();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returning the tabs count.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.length();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removing tab with indicated index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.removeAt(1);
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removing the first tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.removeFirst();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removing the last tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.removeLast();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selecting tab with indicated index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.select(1);
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the content of a Tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.setContentAt(1,'New Content');
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the title of a Tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.setTitleAt(1,'Title 1');
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Showing close button at a specific position.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.showCloseButtonAt(1);
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Showing all close buttons.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.showAllCloseButtons();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the selected tab.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
 
class App extends React.PureComponent<{}, ITabsProps> {
  private myTabs = React.createRef<JqxTabs>();
 
  public componentDidMount(): void {
    this.myTabs.current!.val();
  }
   
  
  public render() {
    return (
      <JqxTabs ref={this.myTabs} 
        width={300}>
        <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
      </JqxTabs>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);