Tabs

Dynamic tabbed interfaces.

handleSelect is triggered when tab is clicked.

import React, {useState} from "react";

const [content, setContent] = useState();

const handleSelect = (index) => {

setContent("Content of tab" + (index + 1));

};

Example

Simple example of tabs.

Tab 1Tab 2Tab 3

<>

<Tabs >

<TabTitle onClick={() => handleSelect(0)}>Tab 1</TabTitle>

<TabTitle onClick={() => handleSelect(1)}>Tab 2</TabTitle>

<TabTitle onClick={() => handleSelect(2)}>Tab 3</TabTitle>

</Tabs>

<div>{content}</div>

</>

Full

Display tab title full length.

Tab 1Tab 2Tab 3

<>

<Tabs full>

<TabTitle onClick={() => handleSelect(0)}>Tab 1</TabTitle>

<TabTitle onClick={() => handleSelect(1)}>Tab 2</TabTitle>

<TabTitle onClick={() => handleSelect(2)}>Tab 3</TabTitle>

</Tabs>

<div>{content}</div>

</>

Border

Make border darker.

Tab 1Tab 2Tab 3

<>

<Tabs grayBorder>

<TabTitle onClick={() => handleSelect(0)}>Tab 1</TabTitle>

<TabTitle onClick={() => handleSelect(1)}>Tab 2</TabTitle>

<TabTitle onClick={() => handleSelect(2)}>Tab 3</TabTitle>

</Tabs>

<div>{content}</div>

</>

API

Tabs

import Tabs from "erxes-ui/lib/components/tabs/index";

* required prop

Name	Type	Default	Description
children*	React.ReactNode		Contain TabTitle components
grayborder	boolean		Make border darker
full	boolean		Display context full screen

TabTitle

import TabTitle from "erxes-ui/lib/components/tabs/index";

* required prop

Name	Type	Default	Description
children*	React.ReactNode		Shows tab content
onClick	function		Define click handler function
className	string		Define className