95 lines
1.8 KiB
Plaintext
95 lines
1.8 KiB
Plaintext
import { Story, ArgsTable, Canvas, Meta } from "@storybook/blocks";
|
|
import * as stories from "./tabs-container.stories.js";
|
|
import TabContainer from "./";
|
|
|
|
<Meta
|
|
title="Components/TabContainer"
|
|
component={TabContainer}
|
|
parameters={{
|
|
source: {
|
|
code: stories.basic,
|
|
},
|
|
}}
|
|
argTypes={{
|
|
onSelect: { action: "onSelect. Selected items: " },
|
|
}}
|
|
/>
|
|
|
|
# TabContainer
|
|
|
|
Custom Tabs menu
|
|
|
|
<Canvas>
|
|
<Story story={stories.basic} name="Default" />
|
|
</Canvas>
|
|
|
|
<ArgsTable story="Default" />
|
|
|
|
### Array Items Properties
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
| --------- | :------: | :------: | :----: | :-----: | --------------------- |
|
|
| `id` | `string` | ✅ | - | - | Index of object array |
|
|
| `title` | `string` | ✅ | - | - | Tabs title |
|
|
| `content` | `object` | ✅ | - | - | Content in Tab |
|
|
|
|
```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>
|
|
),
|
|
},
|
|
];
|
|
```
|
|
|
|
```jsx
|
|
<TabContainer elements={array_items} />
|
|
```
|