React UI Components Documentation

ReactJS Tabs Component

The Tabs component for ReactJS is breaking the content into multiple sections. You can populate it from 'LI' elements for the tab titles and 'DIV' elements for tab contents.

Prerequisites

Refer to ReactJS Getting Started before you start with this help topic.

Configuration

The Tabs component for ReactJS requires the following imports.

 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';

Then we create our component class. Properties and methods are put as ReactJS props.

 
class App extends React.Component {
    render () {
        let tabsHTML = `
          <ul>
              <li>Tab 1</li>
              <li>Tab 2</li>
          </ul>
          <div>
              Content 1
          </div>
          <div>
              Content 2
          </div>
        `;
        return (
            <JqxTabs ref='myTabs' template={tabsHTML}
                width={'90%'} height={200} position={'top'}
            />
        )
    }
}

Finally we render our class in the desired HTML element:

 
ReactDOM.render(<App />, document.getElementById('app'));

Events Methods & Properties

In order to bind to any event, change any property or call any method, we need a reference to the component.
For that we use the ReactJS "ref" Callback Attribute:

 
<JqxTabs ref='myTabs' template={tabsHTML}
    width={'90%'} height={200} position={'top'}
/>

Now, when we have a reference, we need to call the desired event/property/method.
This is done in the componentDidMount() ReactJS Component Lifecycle method.

 
class App extends React.Component {
  componentDidMount()
  {
     //your logic
  }
  render ()
  {
    return
    (
      ....
    )
  }
};

Events

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

The following example demonstrates how to add an event listener:

 
componentDidMount ()
{
 
  this.refs.myTabs.on('tabclick', (event) =>
  {
     //your logic
  });
 
}

Methods & Properties

This is how you call methods & props:

 
//Get Methods
let index = this.refs.myTabs.val();
 
//Set Methods
this.refs.myTabs.val(2);
 
//Get Properties
let height = this.refs.myTabs.height();
 
//Set Properties
this.refs.myTabs.height(450);

Every component have a method setOptions which accepts a object as an argument. This object contains component settings.

 
this.refs.myTabs.setOptions({
    position: "bottom", width: 500, height: 150
})

Every component also have a method getOptions which returns a object containing the component settings.

 
let options = this.refs.myTabs.getOptions();

Tabs Examples

Overview

The following example demonstrates how to create a Tabs component.

 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component {
    componentDidMount() {
        this.refs.animation.on('change', (event) => {
            let checked = event.args.checked;
            this.refs.myTabs.selectionTracker(checked);
        });
        this.refs.contentAnimation.on('change', (event) => {
            let checked = event.args.checked;
            if (checked) {
                this.refs.myTabs.animationType('fade');
            }
            else {
                this.refs.myTabs.animationType('none');
            }
        });
    }
    render () {
        let tabsHTML = `
          <ul>
              <li style="margin-left: 30px;">Node.js</li>
              <li>JavaServer Pages</li>
              <li>Active Server Pages</li>
              <li>Python</li>
              <li>Perl</li>
          </ul>
          <div>
              Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
              is intended for writing scalable network programs such as web servers. It was created
              by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
              Similar environments written in other programming languages include Twisted for
              Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
              Unlike most JavaScript, it is not executed in a web browser, but is instead a form
              of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
              includes a REPL environment for interactive testing.
          </div>
          <div>
              JavaServer Pages (JSP) is a Java technology that helps software developers serve
              dynamically generated web pages based on HTML, XML, or other document types. Released
              in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
              the perception that the Java programming environment didn't provide developers with
              enough support for the Web. To deploy and run, a compatible web server with servlet
              container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
              from Sun Microsystems and the JCP (Java Community Process) must both be met by the
              container.
          </div>
          <div>
              ASP.NET is a web application framework developed and marketed by Microsoft to allow
              programmers to build dynamic web sites, web applications and web services. It was
              first released in January 2002 with version 1.0 of the .NET Framework, and is the
              successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
              on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
              using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
              components to process SOAP messages.
          </div>
          <div>
              Python is a general-purpose, high-level programming language[5] whose design philosophy
              emphasizes code readability. Python claims to "[combine] remarkable power with very
              clear syntax",[7] and its standard library is large and comprehensive. Its use of
              indentation for block delimiters is unique among popular programming languages.
              Python supports multiple programming paradigms, primarily but not limited to object-oriented,
              imperative and, to a lesser extent, functional programming styles. It features a
              fully dynamic type system and automatic memory management, similar to that of Scheme,
              Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
              language, but is also used in a wide range of non-scripting contexts.
          </div>
          <div>
              Perl is a high-level, general-purpose, interpreted, dynamic programming language.
              Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
              language to make report processing easier. Since then, it has undergone many changes
              and revisions and become widely popular amongst programmers. Larry Wall continues
              to oversee development of the core language, and its upcoming version, Perl 6. Perl
              borrows features from other programming languages including C, shell scripting (sh),
              AWK, and sed.[5] The language provides powerful text processing facilities without
              the arbitrary data length limits of many contemporary Unix tools, facilitating easy
              manipulation of text files.
          </div>
        `;
        return (
            <div>
                <JqxTabs ref='myTabs' template={tabsHTML}
                  width={'90%'} height={200} position={'top'}
                />
                <div id='settings'>
                    <JqxCheckBox ref='animation'  value='Enable Select Animation'/>
                    <JqxCheckBox ref='contentAnimation' value='Enable Content Animation'/>
                </div>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Disabled Tabs

The following example demonstrates how to disable the Tabs component.

Tabs API

API Reference of the jQWidgets Tabs component for React: Tabs API