2019-08-06 09:04:01 +00:00
|
|
|
# TabContainer
|
|
|
|
|
|
|
|
Custom Tabs menu
|
|
|
|
|
2019-11-21 13:32:20 +00:00
|
|
|
### Usage
|
2019-08-06 09:04:01 +00:00
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import TabContainer from "@appserver/components/tabs-container";
|
2019-11-21 13:32:20 +00:00
|
|
|
```
|
2019-08-06 09:04:01 +00:00
|
|
|
|
2019-11-21 13:32:20 +00:00
|
|
|
```js
|
2019-08-06 09:04:01 +00:00
|
|
|
const array_items = [
|
2019-11-21 13:32:20 +00:00
|
|
|
{
|
|
|
|
key: "0",
|
|
|
|
title: "Title1",
|
|
|
|
content: (
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<button>BUTTON</button>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<button>BUTTON</button>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<button>BUTTON</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-16 13:16:01 +00:00
|
|
|
),
|
2019-11-21 13:32:20 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "1",
|
|
|
|
title: "Title2",
|
|
|
|
content: (
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<label>LABEL</label>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label>LABEL</label>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label>LABEL</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-16 13:16:01 +00:00
|
|
|
),
|
2019-11-21 13:32:20 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "2",
|
|
|
|
title: "Title3",
|
|
|
|
content: (
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<input></input>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input></input>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input></input>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-16 13:16:01 +00:00
|
|
|
),
|
|
|
|
},
|
2019-08-06 09:04:01 +00:00
|
|
|
];
|
2019-11-21 13:32:20 +00:00
|
|
|
```
|
2019-08-06 09:04:01 +00:00
|
|
|
|
2019-11-21 13:32:20 +00:00
|
|
|
```jsx
|
2019-08-06 09:04:01 +00:00
|
|
|
<TabContainer>{array_items}</TabContainer>
|
|
|
|
```
|
|
|
|
|
2019-11-21 13:32:20 +00:00
|
|
|
### TabContainer Properties
|
2019-08-06 09:04:01 +00:00
|
|
|
|
2019-11-21 13:32:20 +00:00
|
|
|
| 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 |
|
2019-08-06 09:04:01 +00:00
|
|
|
|
2019-11-21 13:32:20 +00:00
|
|
|
### Array Items Properties
|
2019-08-06 09:04:01 +00:00
|
|
|
|
2019-11-21 13:32:20 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| --------- | :------: | :------: | :----: | :-----: | --------------------- |
|
|
|
|
| `id` | `string` | ✅ | - | - | Index of object array |
|
|
|
|
| `title` | `string` | ✅ | - | - | Tabs title |
|
|
|
|
| `content` | `object` | ✅ | - | - | Content in Tab |
|