Abas

Experimente ao vivo

Quer ver um DYONA Form real com múltiplas abas?

Abrir Abas no Lab →

Um DyonaForm pode dividir uma única interface de negócio em múltiplas abas:

DyonaFormSchema
    ↓
tabs[]
    ↓
rows[]
    ↓
columns / fields

As abas não são formulários independentes. Todos os fields pertencem ao mesmo DyonaForm, que mantém uma única coleção de valores. Alternar abas não descarta os valores informados, e o mesmo onSubmit recebe todos os valores juntos. Cada aba pode conter suas próprias rows e fields.

DyonaFormTab

type DyonaFormTab = {
  id: string;
  title: string;
  helpUrl?: string;
  rows: DyonaFormRow[];
};

• id é o identificador técnico não vazio e deve ser único no schema.
• title é o texto visível da aba.
• rows contém as rows desta seção do formulário.
• helpUrl é opcional. Quando a aba ativa o possui, o DYONA Form mostra um ícone compacto de ajuda à direita das abas. O ícone muda com a aba ativa e abre a URL dessa aba em uma nova guia.

Editor de cliente

import {
  DyonaForm,
  type DyonaFormSchema,
  type DyonaFormValues,
} from '@typhonsoftware/dyona-form';

const schema: DyonaFormSchema = {
  title: 'Editor de cliente',
  tabs: [
    {id: 'general', title: 'Informações gerais', rows: [{columns: [
      {name: 'fullName', label: 'Nome completo', type: 'text', required: true, grid: {xs: 12, md: 6}},
      {name: 'workEmail', label: 'E-mail profissional', type: 'email', required: true, grid: {xs: 12, md: 6}},
    ]}]},
    {id: 'commercial', title: 'Informações comerciais', rows: [{columns: [
      {name: 'customerType', label: 'Tipo de cliente', type: 'select', required: true, options: [{value: 'prospect', label: 'Prospect'}, {value: 'customer', label: 'Cliente'}], grid: {xs: 12, md: 6}},
      {name: 'creditLimit', label: 'Limite de crédito', type: 'number', required: true, grid: {xs: 12, md: 6}},
    ]}]},
  ],
  actions: {submit: {label: 'Salvar cliente', icon: 'Save'}},
};

export function CustomerEditor() {
  const handleSubmit = (values: DyonaFormValues) => console.log(values);
  return <DyonaForm locale="pt" schema={schema} onSubmit={handleSubmit} />;
}

Um formulário, um único objeto de valores

Depois de preencher Informações gerais e Informações comerciais, os valores enviados continuam sendo um único objeto, não um objeto por aba:

{
  fullName: 'Alex Morgan',
  workEmail: '[email protected]',
  customerType: 'customer',
  creditLimit: 50000,
}

Erros por aba

Os erros permanecem associados aos seus fields e abas. Uma aba indica sua quantidade de erros; ao salvar um formulário inválido, o DYONA Form pode abrir a aba com o primeiro erro e focar o primeiro field inválido. O resumo global de erros continua representando o formulário completo. Experimente enviando vazio o exemplo de Abas no Lab.

hideSingleTab

hideSingleTab?: boolean controla apenas a barra visual de abas:

Abas	hideSingleTab	Resultado
1	undefined ou false	A aba é visível.
1	true	A barra visual de abas é ocultada.
2 ou mais	true	As abas continuam visíveis.

Ele nunca remove o conteúdo da aba.

const schema: DyonaFormSchema = {
  title: 'Editor rápido',
  hideSingleTab: true,
  tabs: [{
    id: 'main', title: 'Geral',
    rows: [{columns: [{name: 'name', label: 'Nome', type: 'text'}]}],
  }],
};

helpUrl

helpUrl pertence a uma aba. O DYONA Form mostra seu ícone compacto de ajuda à direita das abas somente quando a aba ativa possui uma URL; ele muda quando a aba ativa muda e abre a URL em uma nova guia:

{
  id: 'commercial',
  title: 'Informações comerciais',
  helpUrl: 'https://example.com/customer-credit-policy',
  rows: [/* rows desta aba */],
}

Próximos passos

• Validação
• Condições