import React from "react";
import TabContainer from "./";
const arrayItems = [
{
key: "tab0",
title: "Title1",
content: (
),
},
{
key: "tab1",
title: "Title2",
content: (
),
},
{
key: "tab2",
title: "Title3",
content: (
),
},
{
key: "tab3",
title: "Title4",
content: (
),
},
{
key: "tab4",
title: "Title5",
content: (
),
},
];
const scrollArrayItems = [
{
key: "tab0",
title: "First long tab container",
content: (
<>
>
),
},
{
key: "tab1",
title: "Short",
content: (
<>
>
),
},
{
key: "tab2",
title: "Second long tab container",
content: (
<>
>
),
},
{
key: "tab3",
title: "Short2",
content: (
<>
>
),
},
{
key: "tab4",
title: "Third long tab container header",
content: (
<>
>
),
},
{
key: "tab5",
title: "Short3",
content: (
<>
>
),
},
{
key: "tab6",
title: "tab container",
content: (
<>
>
),
},
{
key: "tab7",
title: "Very long tabs-container field",
content: (
<>
>
),
},
{
key: "tab8",
title: "tab container",
content: (
<>
>
),
},
{
key: "tab9",
title: "Short_04",
content: (
<>
>
),
},
{
key: "tab10",
title: "Short__05",
content: (
<>
>
),
},
{
key: "tab11",
title: "TabsContainer",
content: (
<>
>
),
},
];
const tabsItems = [
{
key: "tab0",
title: "Title00000000",
content: (
<>
>
),
},
{
key: "tab1",
title: "Title00000001",
content: (
<>
>
),
},
{
key: "tab2",
title: "Title00000002",
content: (
<>
>
),
},
{
key: "tab3",
title: "Title00000003",
content: (
<>
>
),
},
{
key: "tab4",
title: "Title00000004",
content: (
<>
>
),
},
{
key: "tab5",
title: "Title00000005",
content: (
<>
>
),
},
{
key: "tab6",
title: "Title00000006",
content: (
<>
>
),
},
{
key: "tab7",
title: "Title00000007",
content: (
<>
>
),
},
{
key: "tab8",
title: "Title00000008",
content: (
<>
>
),
},
{
key: "tab9",
title: "Title00000009",
content: (
<>
>
),
},
];
const Template = ({ onSelect, ...args }) => {
return (
Base TabsContainer:
onSelect(index)}
selectedItem={arrayItems.indexOf(arrayItems[0])}
elements={arrayItems}
/>
Autoscrolling with different tab widths:
onSelect(index)}
/>
Autoscrolling with the same tabs width:
onSelect(index)}
/>
);
};
export const basic = Template.bind({});
basic.args = {
isDisabled: false,
};