DocSpace-buildtools/web/ASC.Web.Storybook/stories/tabs-container

TabContainer

Description

Custom Tabs menu

Usage

import { TabContainer } from 'asc-web-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	true	-	-	Index of object array
title	string	true	-	-	Tabs title
content	object	true	-	-	Content in Tab