63 lines
2.2 KiB
Markdown
63 lines
2.2 KiB
Markdown
# TabContainer
|
|
|
|
#### Description
|
|
|
|
Custom Tabs menu
|
|
|
|
#### Usage
|
|
|
|
```js
|
|
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
|