IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Components: Fixed TabContainer component readme

Browse Source
This commit is contained in:
Ilya Oleshko 2019-11-21 16:32:20 +03:00
parent 83de98ef8e
commit e9f0ced52a
1 changed files with 69 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
web/ASC.Web.Components/src/components/tabs-container/README.md
View File

@ -1,62 +1,85 @@
# TabContainer
#### Description
Custom Tabs menu
#### Usage
### Usage
```js
import { TabContainer } from 'asc-web-components';
import { TabContainer } from "asc-web-components";
```
```js
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>
}
{
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>
)
}
];
```
```jsx
<TabContainer>{array_items}</TabContainer>
```
#### TabContainer Properties
### 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 |
| 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
### 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
| Props | Type | Required | Values | Default | Description |
| --------- | :------: | :------: | :----: | :-----: | --------------------- |
| `id` | `string` | ✅ | - | - | Index of object array |
| `title` | `string` | ✅ | - | - | Tabs title |
| `content` | `object` | ✅ | - | - | Content in Tab |