Ravox KitBásicos
Expanding Tabs
Abas só de ícone: a ativa vira uma pílula com ícone e nome, abrindo devagar enquanto as vizinhas se afastam. Com steps, ganha uma barra de progresso em cima de cada aba, para assistentes e formulários em passos.
Ajustes
Ligar e desligar
Exemplos
Assistente em passos
Barra de ferramentas pequena
Instalação
O comando cria components/ui/expanding-tabs.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx @ravox-ui/cli add expanding-tabsOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| value / defaultValue | string | — | A aba ativa (controlado ou não). |
| onValueChange | (value: string) => void | — | Chamado ao trocar de aba (clique, setas, Home e End). |
| size | "sm" | "md" | "md" | Altura das abas. |
| steps | boolean | false | Barra de progresso em cima de cada aba, preenchida até a ativa; as abas dividem a largura. |
| order | string[] | — | A ordem dos values, para as barras de steps. Sem ela, vale a ordem em que as abas aparecem. |
| ExpandingTabsItem | componente | — | Uma aba: value, icon (sempre visível) e o nome nos children (só aparece na ativa; fica no DOM para leitores de tela). |