DocSpace-client/packages/shared/components/tabs

Tabs

Usage

import { Tabs } from "@docspace/shared/components/tabs";

const array_items = [
  {
    id: "0",
    name: "Title1",
    content: (
      <div>
        <div>
          <button>BUTTON</button>
        </div>
        <div>
          <button>BUTTON</button>
        </div>
        <div>
          <button>BUTTON</button>
        </div>
      </div>
    ),
  },
  {
    id: "1",
    name: "Title2",
    content: (
      <div>
        <div>
          <label>LABEL</label>
        </div>
        <div>
          <label>LABEL</label>
        </div>
        <div>
          <label>LABEL</label>
        </div>
      </div>
    ),
  },
  {
    id: "2",
    name: "Title3",
    isDisabled: true;
    content: (
      <div>
        <div>
          <input></input>
        </div>
        <div>
          <input></input>
        </div>
        <div>
          <input></input>
        </div>
      </div>
    ),
  },
];

<Tabs items={array_items} />

Tabs Properties

Props	Type	Required	Values	Default	Description
items	array	✅	-	-	Child elements
selectedItemId	number, string	-	-	-	Selected item id of tabs
theme	primary, secondary	-	-	primary	Theme for displaying tabs
stickyTop	string	-	-	-	Tab indentation for sticky positioning
onSelect	func	-	-	-	Sets a callback function that is triggered when the tab is selected

Array Items Properties

Props	Type	Required	Values	Default	Description
id	string	✅	-	-	Index of object array
name	string	✅	-	-	Tab text
content	node	✅	-	-	Content in Tab
isDisabled	boolean	-	-	-	State of tab inclusion. State only works for tabs with a secondary theme
onClick	func	-	-	-	Triggered when a title is selected