TabContainer
Custom Tabs menu
Usage
import { TabContainer } from "@docspace/shared/components";
const array_items = [
{
key: "0",
title: "Title1",
content: (
<div>
<div>
<button>BUTTON</button>
</div>
<div>
<button>BUTTON</button>
</div>
<div>
<button>BUTTON</button>
</div>
</div>
),
},
{
key: "1",
title: "Title2",
content: (
<div>
<div>
<label>LABEL</label>
</div>
<div>
<label>LABEL</label>
</div>
<div>
<label>LABEL</label>
</div>
</div>
),
},
{
key: "2",
title: "Title3",
content: (
<div>
<div>
<input></input>
</div>
<div>
<input></input>
</div>
<div>
<input></input>
</div>
</div>
),
},
];
<TabContainer>{array_items}</TabContainer>
TabContainer Properties
| Props |
Type |
Required |
Values |
Default |
Description |
isDisabled |
boolean |
- |
- |
- |
Disable the TabContainer |
selectedItem |
number |
- |
- |
0 |
Selected title of tabs container |
onSelect |
func |
- |
- |
- |
Triggered when a title is selected |
Array Items Properties
| Props |
Type |
Required |
Values |
Default |
Description |
id |
string |
✅ |
- |
- |
Index of object array |
title |
string |
✅ |
- |
- |
Tabs title |
content |
object |
✅ |
- |
- |
Content in Tab |
