AppTabs

Moléculas

Abrir no Storybook

Abas para alternar entre painéis de conteúdo na mesma página, compostas com AppTabList, AppTab e AppTabPanel. As setas ←/→ (e Home/End) trocam de aba; só a aba ativa entra na ordem do Tab. No celular, a lista rola na horizontal.

Quando usar: área do participante (Números da sorte, Cupons, Atendimentos, Perfil), modalidades de um regulamento, detalhes e acompanhamento de um atendimento.

Quando não usar: navegação entre páginas (use links) ou conteúdo que a pessoa precisa ver junto (use seções).

Importar

import { AppTabs } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppTabs.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppTabs.css';

Exemplos

Area Do Participante

Exemplo: AppTabs, Area Do Participante

const AreaDoParticipante = () => <ParticipantTabs />;

Regulamento

Exemplo: AppTabs, Regulamento

const Regulamento = () => (
  <AppTabs defaultValue="geral">
    <AppTabList aria-label="Modalidades do regulamento">
      <AppTab value="geral">Geral</AppTab>
      <AppTab value="sorteio">Sorteio</AppTab>
      <AppTab value="premios">Prêmios</AppTab>
    </AppTabList>
    <AppTabPanel value="geral">Regras gerais da promoção</AppTabPanel>
    <AppTabPanel value="sorteio">Como funciona o sorteio</AppTabPanel>
    <AppTabPanel value="premios">Prêmios da campanha</AppTabPanel>
  </AppTabs>
);

Atendimento

Exemplo: AppTabs, Atendimento

const Atendimento = () => (
  <AppTabs defaultValue="detalhes">
    <AppTabList aria-label="Informações do atendimento">
      <AppTab value="detalhes">Detalhes</AppTab>
      <AppTab value="acompanhamento">Acompanhamento</AppTab>
    </AppTabList>
    <AppTabPanel value="detalhes">Detalhes do atendimento</AppTabPanel>
    <AppTabPanel value="acompanhamento">Acompanhe sua solicitação</AppTabPanel>
  </AppTabs>
);

Pill

Exemplo: AppTabs, Pill

const Pill = () => (
  <AppTabs defaultValue="cupons" variant="pill">
    <AppTabList aria-label="Seções">
      <AppTab value="numeros">Números da sorte</AppTab>
      <AppTab value="cupons">Cupons</AppTab>
    </AppTabList>
    <AppTabPanel value="numeros">Números</AppTabPanel>
    <AppTabPanel value="cupons">Cupons</AppTabPanel>
  </AppTabs>
);

Celular

Exemplo: AppTabs, Celular

const Celular = () => (
  <div style={{ width: 360 }}>
    <ParticipantTabs />
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
defaultValue	string	—	Aba selecionada ao montar (não controlado).
fullWidth	boolean	false	As abas dividem a largura disponível.
onValueChange	((value: string) => void)	—	Chamado ao trocar de aba, por clique ou pelas setas do teclado.
value	string	—	Aba selecionada (controlado).
variant	"underline" | "pill"	underline	underline: linha da marca sob a aba ativa. pill: fundo suave da marca na aba ativa. Padrão: 'underline'.