Search results

Render other components in Tab using template

You can render other components inside Tab using React template. Through this, we can add content as other components directly with all functionalities to our Tab. Follow the below guidelines for using the other components as template in tab.

  • Declare a template within the function returns jsx element. If the template does not need arguments no need to pass the properties.

  • Assign the function as value for the template property.

Source
Preview
index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-react-calendars';
export default class App extends React.Component {
    render() {
        let headertext;
        function contentTemplate() {
            return (<ButtonComponent>Click me</ButtonComponent>);
        }
        function contentTemplate1() {
            return (<DatePickerComponent></DatePickerComponent>);
        }
        function contentTemplate2() {
            return (<CalendarComponent></CalendarComponent>);
        }
        headertext = [{ text: "Tab1" }, { text: "Tab2" }, { text: "Tab3" }];
        return (<div id='container'>
          <TabComponent heightAdjustMode='Auto' id='tabelement'>
            <TabItemsDirective>
              <TabItemDirective header={headertext[0]} content={contentTemplate}/>
            <TabItemDirective header={headertext[1]} content={contentTemplate1}/>
          <TabItemDirective header={headertext[2]} content={contentTemplate2}/>
            </TabItemsDirective>
          </TabComponent>
        </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective, SelectEventArgs } from '@syncfusion/ej2-react-navigations';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent ,CalendarComponent} from '@syncfusion/ej2-react-calendars';


export default class App extends React.Component<{}, {}> {

  render() {
  let headertext: any;
  function contentTemplate(): JSX.Element {
    return(<ButtonComponent>Click me</ButtonComponent>);
  }
  function contentTemplate1(): JSX.Element {
    return(<DatePickerComponent></DatePickerComponent>);
  }
  function contentTemplate2(): JSX.Element {
    return( <CalendarComponent ></CalendarComponent>);
  }
    headertext = [{ text: "Tab1"}, { text: "Tab2"}, { text: "Tab3"}];
    return (
        <div id='container'>
          <TabComponent heightAdjustMode='Auto' id='tabelement'>
            <TabItemsDirective>
              <TabItemDirective header= { headertext[0] }
                content= { contentTemplate } />
            <TabItemDirective header= { headertext[1] }
                content= { contentTemplate1 } />
          <TabItemDirective header= { headertext[2] }
                content= { contentTemplate2 } />
            </TabItemsDirective>
          </TabComponent>
        </div>
    );
  }
}

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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.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>