Tabs
Flexible navigation tool with various modes and features.
Flexible navigation tool with various modes and features.
import { Tabs } from '@tacos-ui/react';
export const Demo = (props: Tabs.RootProps) => {
const options = [
{ id: 'react', label: 'React' },
{ id: 'solid', label: 'Solid' },
{ id: 'svelte', label: 'Svelte', disabled: true },
{ id: 'vue', label: 'Vue' },
];
return (
<Tabs.Root defaultValue="react" {...props}>
<Tabs.List>
{options.map((option) => (
<Tabs.Trigger disabled={option.disabled} key={option.id} value={option.id}>
{option.label}
</Tabs.Trigger>
))}
<Tabs.Indicator />
</Tabs.List>
<Tabs.Content value="react">Know React? Check out Solid!</Tabs.Content>
<Tabs.Content value="solid">Know Solid? Check out Svelte!</Tabs.Content>
<Tabs.Content value="svelte">Know Svelte? Check out Vue!</Tabs.Content>
<Tabs.Content value="vue">Know Vue? Check out React!</Tabs.Content>
</Tabs.Root>
);
};
Previous
SwitchNext
Tags Input