import {Meta, Canvas, Controls} from '@storybook/addon-docs/blocks' import * as TabsStories from "./Tabs.stories" import { Table } from "../Table" import {Popover} from "../Popover" import {Info} from "lucide-react" # Tabs Um conjunto de seções de conteúdo em camadas, conhecidas como painéis de guias, que são exibidas uma de cada vez. ### Anatomia Importe todas as peças e junte-as. ```tsx import * as Tabs from '@eloquent'; export default () => ( ); ``` ## API Reference ### Tabs.Root Contém todas as partes componentes das guias. Props Type Default asChild Altere o elemento renderizado padrão para aquele passado como filho, mesclando seus adereços e comportamento. boolean false defaultValue O valor da guia que deve estar ativa quando renderizada inicialmente. Use quando não precisar controlar o estado das guias. string - value O valor controlado da guia a ser ativada. Deve ser usado em conjunto com onValueChange. string - onValueChange O valor da guia que deve estar ativa quando renderizada inicialmente. Use quando não precisar controlar o estado das guias. function (value: string) => void - orientation A orientação do componente. enum "horizontal" | "vertical" | undefined "horizontal" dir A direção de leitura das guias. Se omitido, herda globalmente de DirectionProvider ou assume o modo de leitura LTR (da esquerda para a direita). enum "ltr" | "rtl" - activationMode Quando automático, as guias são ativadas ao receber o foco. Quando manual, as guias são ativadas quando clicadas. enum "automatic" | "manual" "automatic" Data attribute Values [data-orientation] "vertical" | "horizontal" ### Tabs.List Contém os triggers alinhados ao longo da borda do conteúdo ativo. Props Type Default asChild Altere o elemento renderizado padrão para aquele passado como filho, mesclando seus adereços e comportamento. boolean false loop Quando verdadeiro, a navegação pelo teclado irá percorrer da última guia para a primeira e vice-versa. boolean true Data attribute Values [data-orientation] "vertical" | "horizontal" ### Tabs.Trigger O botão que ativa seu conteúdo associado. Props Type Default asChild Altere o elemento renderizado padrão para aquele passado como filho, mesclando seus adereços e comportamento. boolean false value* Um valor exclusivo que associa o trigger a um conteúdo. string - disabled Quando verdadeiro, impede que o usuário interaja com a guia. boolean false Data attribute Values [data-state] "active" | "inactive" [data-disabled] Presente quando desativado [data-orientation] "vertical" | "horizontal" ### Tabs.Content Contém o conteúdo associado a cada trigger. Props Type Default asChild Altere o elemento renderizado padrão para aquele passado como filho, mesclando seus adereços e comportamento. boolean false value* Um valor exclusivo que associa o conteúdo a um trigger. string - forceMount Usado para forçar a montagem quando é necessário mais controle. Útil ao controlar animações com bibliotecas de animação React. boolean - Data attribute Values [data-state] "active" | "inactive" [data-orientation] "vertical" | "horizontal" ### Exemplos Você pode criar guias verticais usando o suporte de orientação. ```tsx import * as Tabs from '@eloquent'; export default () => ( One Two Three Tab one content Tab two content Tab three content ); ``` ### Acessibilidade Adere ao [padrão de design Tabs WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs). Interações de teclado Key Description Tab Quando o foco passa para as guias, foca o trigger ativo. Quando um trigger está em foco, move o foco para o conteúdo ativo. ArrowDown Move o foco para o próximo trigger dependendo da orientação e ativa o conteúdo associado. ArrowRight Move o foco para o próximo trigger dependendo da orientação e ativa o conteúdo associado. ArrowUp Move o foco para o próximo trigger dependendo da orientação e ativa o conteúdo associado. ArrowLeft Move o foco para o próximo trigger dependendo da orientação e ativa o conteúdo associado. Home Move o foco para o primeiro trigger e ativa o conteúdo associado. End Move o foco para o último trigger e ativa o conteúdo associado.