Search results

Add nested Tabs

Tab supports to render the nested level of Tabs by using content property. You can add the nested Tab element inside the parent Tab content property. To render the nested Tab, initialize the component using the id of Tab from selected event handler.

Source
Preview
index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { Tab, TabComponent } from '@syncfusion/ej2-react-navigations';
import { nested_tab_items, usa_items, france_items, australia_items } from 'datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.tabItems = nested_tab_items;
    }
    handleSelectEvent(e) {
        if (e.selectedIndex === 0 && isNOU(document.querySelector('#usa_tab.e-tab'))) {
            let usa_obj = new Tab({
                items: usa_items
            });
            usa_obj.appendTo('#usa_tab');
        }
        else if (e.selectedIndex === 1 && isNOU(document.querySelector('#france_tab.e-tab'))) {
            let france_obj = new Tab({
                items: france_items
            });
            france_obj.appendTo('#france_tab');
        }
        else if (e.selectedIndex === 2 && isNOU(document.querySelector('#australia_tab.e-tab'))) {
            let australia_obj = new Tab({
                items: australia_items
            });
            australia_obj.appendTo('#australia_tab');
        }
    }
    render() {
        return (<TabComponent heightAdjustMode='Auto' id='tabelement' items={this.tabItems} selected={this.handleSelectEvent}>
      </TabComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { Tab, TabComponent, TabItemDirective, TabItemsDirective, SelectEventArgs } from '@syncfusion/ej2-react-navigations';
import { nested_tab_items, usa_items, france_items, australia_items } from 'datasource';

export default class App extends React.Component<{}, {}> {
  public tabItems: Object[] = nested_tab_items;
  public handleSelectEvent(e: SelectEventArgs): void {
    if (e.selectedIndex === 0 && isNOU(document.querySelector('#usa_tab.e-tab'))) {
      let usa_obj: Tab = new Tab({
        items: usa_items
      });
      usa_obj.appendTo('#usa_tab');
    } else if (e.selectedIndex === 1 && isNOU(document.querySelector('#france_tab.e-tab'))) {
      let france_obj: Tab = new Tab({
        items: france_items
      });
      france_obj.appendTo('#france_tab');
    } else if (e.selectedIndex === 2 && isNOU(document.querySelector('#australia_tab.e-tab'))) {
      let australia_obj: Tab = new Tab({
        items: australia_items
      });
      australia_obj.appendTo('#australia_tab');
    }
  }
  render() {
    return (
      <TabComponent heightAdjustMode='Auto' id='tabelement' items={this.tabItems} selected={this.handleSelectEvent}>
      </TabComponent>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
                <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>