Tabs

Organize conteúdo em visualizações separadas onde apenas uma é visível por vez.

Importação

import { Tabs } from 'asterui'

Exemplos

Uso Básico

Abas simples com troca de conteúdo automática.

</>

Tab 1Tab 2Tab 3

Content of Tab 1

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs>
        <Tabs.Panel tab="Tab 1" key="1">
          <Typography.Text>Content of Tab 1</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 2" key="2">
          <Typography.Text>Content of Tab 2</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 3" key="3">
          <Typography.Text>Content of Tab 3</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Página de Configurações

Página de configurações completa com formulários usando inputs com label flutuante.

</>

AccountSecurity

import { Tabs, Space, Input, Button } from 'asterui'

function App() {
  return (
      <Tabs defaultActiveKey="account" variant="border">
        <Tabs.Panel tab="Account" key="account">
          <Space direction="vertical" size="md">
            <Input floatingLabel="Username" placeholder="john_doe" />
            <Input floatingLabel="Email" type="email" placeholder="john@example.com" />
            <Button color="primary">Save</Button>
          </Space>
        </Tabs.Panel>
        <Tabs.Panel tab="Security" key="security">
          <Space direction="vertical" size="md">
            <Input floatingLabel="Current Password" type="password" />
            <Input floatingLabel="New Password" type="password" />
            <Button color="primary">Update</Button>
          </Space>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Variante Emoldurada

Abas com estilo de caixa fechada.

</>

HomeProfileSettings

Home content

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs variant="box">
        <Tabs.Panel tab="Home" key="home">
          <Typography.Text>Home content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Profile" key="profile">
          <Typography.Text>Profile content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Settings" key="settings">
          <Typography.Text>Settings content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Variante Elevada

Abas com aparência elevada 3D.

</>

OverviewReportsAnalytics

Overview content

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs variant="lift">
        <Tabs.Panel tab="Overview" key="1">
          <Typography.Text>Overview content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Reports" key="2">
          <Typography.Text>Reports content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Analytics" key="3">
          <Typography.Text>Analytics content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Diferentes Tamanhos

Abas em vários tamanhos usando componentes Space e Typography.

</>

Small

Tab 1Tab 2

Small tabs content

Large

Tab 1Tab 2

Large tabs content

import { Tabs, Space, Typography } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <div>
          <Typography.Text strong>Small</Typography.Text>
          <Tabs size="sm">
            <Tabs.Panel tab="Tab 1" key="1"><Typography.Text>Small tabs content</Typography.Text></Tabs.Panel>
            <Tabs.Panel tab="Tab 2" key="2"><Typography.Text>Content 2</Typography.Text></Tabs.Panel>
          </Tabs>
        </div>
        <div>
          <Typography.Text strong>Large</Typography.Text>
          <Tabs size="lg">
            <Tabs.Panel tab="Tab 1" key="1"><Typography.Text>Large tabs content</Typography.Text></Tabs.Panel>
            <Tabs.Panel tab="Tab 2" key="2"><Typography.Text>Content 2</Typography.Text></Tabs.Panel>
          </Tabs>
        </div>
      </Space>
    )
}

export default App

Aba Desabilitada

Desabilite abas específicas.

</>

ActiveDisabledAlso Active

Active content

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs>
        <Tabs.Panel tab="Active" key="1">
          <Typography.Text>Active content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Disabled" key="2" disabled>
          <Typography.Text>Cannot see this</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Also Active" key="3">
          <Typography.Text>Active content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Padrão Baseado em Dados

Use a prop items para abas baseadas em dados com ícones.

</>

HomeProfileSettings

Home content

import { Tabs, notification, Typography } from 'asterui'
import { HomeIcon, UserIcon, Cog6ToothIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [activeKey, setActiveKey] = useState('home')
  
  const items = [
    { key: 'home', label: 'Home', icon: <HomeIcon size="sm" />, children: <Typography.Text>Home content</Typography.Text> },
    { key: 'profile', label: 'Profile', icon: <UserIcon size="sm" />, children: <Typography.Text>Profile content</Typography.Text> },
    { key: 'settings', label: 'Settings', icon: <Cog6ToothIcon size="sm" />, children: <Typography.Text>Settings content</Typography.Text> },
  ]
  
  return (
      <Tabs
        items={items}
        activeKey={activeKey}
        onChange={(key) => {
          setActiveKey(key)
          notification.info({ message: `Switched to ${key}` })
        }}
        variant="border"
      />
    )
}

export default App

Posição Inferior

Abas posicionadas abaixo do conteúdo.

</>

Content appears above the tabs

Tab 1Tab 2Tab 3

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs position="bottom" variant="border">
        <Tabs.Panel tab="Tab 1" key="1">
          <Typography.Text>Content appears above the tabs</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 2" key="2">
          <Typography.Text>Second tab content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 3" key="3">
          <Typography.Text>Third tab content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

API

Tabs

Propriedade	Descrição	Tipo	Padrão
children	Painéis de aba (padrão composto)	React.ReactNode	-
items	Itens de aba (padrão baseado em dados)	TabItem[]	-
activeKey	Chave da aba ativa atual (controlado)	string	-
defaultActiveKey	Chave da aba ativa padrão (não controlado)	string	-
onChange	Callback quando a aba muda	(key: string) => void	-
variant	Variante de estilo visual	'box' | 'border' | 'lift'	-
size	Tamanho da aba	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
position	Posição da aba relativa ao conteúdo	'top' | 'bottom'	'top'
className	Classes CSS adicionais	string	-

TabItem (para prop items)

Propriedade	Descrição	Tipo	Padrão
key	Identificador único	string	-
label	Label do botão da aba	React.ReactNode	-
children	Conteúdo do painel da aba	React.ReactNode	-
disabled	Desabilitar a aba	boolean	false
icon	Ícone da aba	React.ReactNode	-

Tabs.Panel (padrão composto)

Propriedade	Descrição	Tipo	Padrão
key	Identificador único para a aba (prop key do React)	string	-
tab	Label do botão da aba	React.ReactNode	-
disabled	Desabilitar a aba	boolean	false
icon	Ícone da aba	React.ReactNode	-
children	Conteúdo do painel da aba	React.ReactNode	-

Acessibilidade

• Usa roles ARIA adequados: tablist, tab e tabpanel
• Navegação por teclado: Teclas de seta movem entre abas, tecla Tab move foco para o painel
• Aba ativa é indicada com aria-selected="true"
• Abas desabilitadas usam aria-disabled para comunicação adequada
• Painéis de aba usam aria-labelledby para associar com sua aba

Dicas de Uso

• Use activeKey para abas controladas, defaultActiveKey para não controladas
• Use a prop items para abas baseadas em dados, Tabs.Panel para padrão composto
• Use position="bottom" para colocar abas abaixo do conteúdo