Skip to main content

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

NameTypeDefaultDescription
children*React.ReactNodeContain TabTitle components
grayborderbooleanMake border darker
fullbooleanDisplay context full screen

TabTitle#

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

* required prop

NameTypeDefaultDescription
children*React.ReactNodeShows tab content
onClickfunctionDefine click handler function
classNamestringDefine className
Last updated on by enkhzule