Navegação

Tabs

Navegação por abas para alternar entre seções de conteúdo.

Uso

Use o elemento <y-tabs> no seu HTML:

html
<y-tabs value="detalhes">  <y-tab-panel value="detalhes" label="Detalhes">Informações do produto</y-tab-panel>  <y-tab-panel value="estoque" label="Estoque">Controle de estoque</y-tab-panel>  <y-tab-panel value="precos" label="Preços">Tabela de preços</y-tab-panel></y-tabs>

Exemplos

Padrão

Padrão

Propriedades

PropriedadeTipoPadrãoDescrição
valuestringAba ativa

Importação

Importe todos os componentes ou apenas este:

typescript
// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/tabs.js';

Acessibilidade

  • Suporta navegação por teclado
  • Utiliza atributos ARIA apropriados
  • focus-visible para indicação de foco