DocSpace-client/packages/components/tabs-container/README.md

TabContainer

Custom Tabs menu

Usage

import TabContainer from "@docspace/components/tabs-container";

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