Tabs
Tabs help you to display certain content depending on certain value. It renders content depending on the current active tab.
Basic implementation
To start using the carousel component, you need to set up a few settings first.
basic-component.tsx
import { useState } from "react";
import { Tabs } from "cloth-ui";
export const BasicComponent = () => {
const [filter, setFilter] = useState("npm");
const dataColumns = [
{ label: "npm", value: "npm" },
{ label: "pnpm", value: "pnpm" },
{ label: "bun", value: "bun" },
];
const renderContent = () => {
switch {
case "npm":
return <code>npm run dev</code>;
case "pnpm":
return <code>pnpm run dev</code>;
case "bun":
return <code>bun run dev</code>;
default:
return null;
}
};
return (
<>
<Tabs tabs={dataColumns} setFilter={setFilter} />
{renderContent()}
</>
);
};
Note that each of the components that is rendered on each tab in this example has its styles.
Disabling Tabs
You can disable any tabs by just passing its index using the disabledTabs attribute.
disabled-component.tsx
import { useState } from "react";
import { Tabs } from "cloth-ui";
export const DisabledComponent = () => {
const [filter, setFilter] = useState("npm");
const dataColumns = [
{ label: "npm", value: "npm" },
{ label: "pnpm", value: "pnpm" },
{ label: "bun", value: "bun" },
];
const renderContent = () => {
switch {
case "npm":
return <code>npm run dev</code>;
case "pnpm":
return <code>pnpm run dev</code>;
case "bun":
return <code>bun run dev</code>;
default:
return null;
}
};
// When passing in the disabledTabs array the number "2"
// it will disable the third tab on the component
return (
<>
<Tabs tabs={dataColumns} setFilter={setFilter} disabledTabs={[2]} />
{renderContent()}
</>
);
};
Note that each of the components that is rendered on each tab in this example has its styles.