# Tabs

Alterna paineis irmaos na mesma página.

Compõe com `TabList`, `Tab` e `TabPanel`, casando `value` entre aba e painel. O
risco que corre até a aba ativa se posiciona sozinho.

`TabList` tem `variant`, do tipo `TabVariant`. O risco embaixo, que é o padrão,
diz "esta parte da página". A caixinha, `variant="segmented"`, diz "a mesma
coisa, de outro jeito": largura de tela, preview e código, escuro e claro.
Trocar uma pela outra faz o controle prometer o que ele não faz.

## Quando não usar

Não use para navegação entre páginas: aba sugere que o conteúdo está ali do
lado, não em outro endereço. Se o clique troca a URL, é link, e o lugar dele é
a `NavigationMenu` ou a `Sidebar`.

## No React Native

Traduz pela metade, de propósito. O `Tabs` nativo é **só** a caixinha (`variant="segmented"` no web): `items`, `value`, `onValueChange`, sem `TabList`, `Tab` nem `TabPanel`. Aba que troca a seção da página não é peça no celular (é tab bar do router), e insistir numa aba desenhada por cima disso dá duas navegações concorrentes na mesma tela.

## Importação

```tsx
import { Tabs } from '@rivocode/ui'
```

## Exemplos

### Básico

```tsx
import { Tab, TabList, TabPanel, Tabs } from '@rivocode/ui'

export function Basic() {
  return (
    <Tabs defaultValue="abertas" className="max-w-lg">
      <TabList>
        <Tab value="todas">Todas</Tab>
        <Tab value="abertas">Abertas</Tab>
        <Tab value="vencidas">Vencidas</Tab>
      </TabList>
      <TabPanel value="todas">Quarenta e duas notas no período.</TabPanel>
      <TabPanel value="abertas">Doze notas aguardando pagamento.</TabPanel>
      <TabPanel value="vencidas">Três notas vencidas, somando R$ 18,4K.</TabPanel>
    </Tabs>
  )
}
```

### Com aba desabilitada

```tsx
import { Tab, TabList, TabPanel, Tabs } from '@rivocode/ui'

export function WithDisabledTab() {
  return (
    <Tabs defaultValue="dados" className="max-w-lg">
      <TabList>
        <Tab value="dados">Dados</Tab>
        <Tab value="anexos">Anexos</Tab>
        <Tab value="historico" disabled>Histórico</Tab>
      </TabList>
      <TabPanel value="dados">Razão social, CNPJ e endereço.</TabPanel>
      <TabPanel value="anexos">Nenhum anexo enviado.</TabPanel>
    </Tabs>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `defaultValue` | `any` |  | 0.4.0 | The default value. |
| `onValueChange` | `((value: any, eventDetails: TabsRootChangeEventDetails) => void)` |  | 0.4.0 | Callback invoked when new value is being set. |
| `orientation` | `Orientation` |  | 0.4.0 | The component orientation (layout flow direction). |
| `render` | `ComponentRenderFn<HTMLProps, TabsRootState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `value` | `any` |  | 0.4.0 | The value of the currently active `Tab`. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### Tab

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `value` | `any` | sim | 0.4.0 | The value of the Tab. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the Tab is disabled. |
| `nativeButton` | `boolean` |  | 0.4.0 | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `render` | `ComponentRenderFn<HTMLProps, TabsTabState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### TabList

A fila de abas.

Rola de lado quando não cabe, em vez de espremer ou quebrar linha: aba em duas
linhas vira menu disfarçado, e no celular quase nenhuma fila de aba cabe
inteira. A barra de rolagem fica escondida de propósito, o gesto continua
valendo, e no desktop a aba ativa se traz para a vista sozinha pelo foco do
teclado.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `activateOnFocus` | `boolean` |  | 0.4.0 | Whether to automatically change the active tab on arrow key focus. |
| `loopFocus` | `boolean` |  | 0.4.0 | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| `render` | `ComponentRenderFn<HTMLProps, TabsListState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `variant` | `TabVariant` |  | 0.4.0 | `underline` divide uma pagina em secoes; `segmented` troca a forma de ver a mesma coisa, como largura de tela ou preview e codigo. |

### TabPanel

O conteúdo de uma aba.

O `value` amarra painel e aba. Só o painel ativo fica no documento, então
formulário dentro de aba escondida não entra no `Tab` do teclado.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `value` | `any` | sim | 0.4.0 | The value of the TabPanel. |
| `keepMounted` | `boolean` |  | 0.4.0 | Whether to keep the HTML element in the DOM while the panel is hidden. |
| `render` | `ComponentRenderFn<HTMLProps, TabsPanelState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

## Ver também

- [Breadcrumb](/componentes/breadcrumb.md)
- [Command](/componentes/command.md)
- [Menu](/componentes/menu.md)
- [Menubar](/componentes/menubar.md)
- [NavigationMenu](/componentes/navigation-menu.md)
- [Pagination](/componentes/pagination.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)