Tabs · Eyes

Visualizar

import { useState } from "react";
import { Tabs } from "@vincisys/eyeson";

export function TabsBasicDemo() {
	const [value, setValue] = useState('overview');
	return <Tabs tabs={BASIC_TABS} value={value} onValueChange={setValue} />;
}

Instalação

import { Tabs } from '@vincisys/eyeson';

Uso

import { useState } from 'react';
import { Tabs, type TabsItem } from '@vincisys/eyeson';

const tabs: TabsItem[] = [
{ value: 'overview', label: 'Visão geral' },
{ value: 'settings', label: 'Configurações' },
];

export function Example() {
const [value, setValue] = useState('overview');
return <Tabs tabs={tabs} value={value} onValueChange={setValue} />;
}

Exemplos

Segmentado (padrão)

Visualizar

import { useState } from "react";
import { Tabs } from "@vincisys/eyeson";

export function TabsBasicDemo() {
	const [value, setValue] = useState('overview');
	return <Tabs tabs={BASIC_TABS} value={value} onValueChange={setValue} />;
}

Sublinhado

Use variant="underline" para um estilo mais discreto, com um indicador em barra abaixo da aba ativa em vez da pílula.

Visualizar

import { useState } from "react";
import { Tabs } from "@vincisys/eyeson";

export function TabsUnderlineDemo() {
	const [value, setValue] = useState('overview');
	return (
		<Tabs
			variant="underline"
			tabs={BASIC_TABS}
			value={value}
			onValueChange={setValue}
		/>
	);
}

Tamanhos

size="sm" combina com Input size="sm" para usar em barras de ferramentas mais compactas.

Visualizar

import { useState } from "react";
import { Tabs } from "@vincisys/eyeson";

export function TabsSizesDemo() {
	const [value, setValue] = useState('overview');
	return (
		<div className="flex flex-col gap-4">
			<Tabs
				size="md"
				tabs={BASIC_TABS}
				value={value}
				onValueChange={setValue}
			/>
			<Tabs
				size="sm"
				tabs={BASIC_TABS}
				value={value}
				onValueChange={setValue}
			/>
		</div>
	);
}

Overflow com scroll

Quando as abas não cabem no espaço disponível, a lista rola horizontalmente — com fade nas bordas e suporte a arrastar com o mouse (dispositivos touch usam o scroll nativo).

Visualizar

import { useState } from "react";
import { Tabs } from "@vincisys/eyeson";

export function TabsOverflowDemo() {
	const [value, setValue] = useState('overview');
	return (
		<div className="w-full max-w-sm">
			<Tabs tabs={MANY_TABS} value={value} onValueChange={setValue} />
		</div>
	);
}