Solapas

Probalo en vivo

¿Querés ver un DYONA Form real con múltiples solapas?

Abrir Solapas en el Lab →

Un DyonaForm puede dividir una misma interfaz de negocio en múltiples solapas:

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

Las solapas no son formularios independientes. Todos los fields pertenecen al mismo DyonaForm, que mantiene una única colección de valores. Cambiar de solapa no descarta lo ingresado y el mismo onSubmit recibe todos los valores juntos. Cada solapa puede contener sus propias rows y fields.

DyonaFormTab

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

• id es el identificador técnico no vacío y debe ser único dentro del schema.
• title es el texto visible de la solapa.
• rows contiene las rows de esa sección del formulario.
• helpUrl es opcional. Cuando la solapa activa lo posee, DYONA Form muestra un icono compacto de ayuda a la derecha de las solapas. El icono cambia con la solapa activa y abre la URL de esa solapa en una pestaña nueva.

Editor de cliente

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

const schema: DyonaFormSchema = {
  title: 'Editor de cliente',
  tabs: [
    {id: 'general', title: 'Información general', rows: [{columns: [
      {name: 'fullName', label: 'Nombre completo', type: 'text', required: true, grid: {xs: 12, md: 6}},
      {name: 'workEmail', label: 'Email laboral', type: 'email', required: true, grid: {xs: 12, md: 6}},
    ]}]},
    {id: 'commercial', title: 'Información comercial', rows: [{columns: [
      {name: 'customerType', label: 'Tipo de cliente', type: 'select', required: true, options: [{value: 'prospect', label: 'Prospecto'}, {value: 'customer', label: 'Cliente'}], grid: {xs: 12, md: 6}},
      {name: 'creditLimit', label: 'Límite de crédito', type: 'number', required: true, grid: {xs: 12, md: 6}},
    ]}]},
  ],
  actions: {submit: {label: 'Guardar cliente', icon: 'Save'}},
};

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

Un formulario, un único objeto de valores

Después de completar Información general y luego Información comercial, los valores enviados siguen siendo un único objeto, no uno por solapa:

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

Errores por solapa

Los errores permanecen asociados a sus fields y solapas. Una solapa indica su cantidad de errores; al guardar un formulario inválido, DYONA Form puede abrir la solapa con el primer error y enfocar su primer field inválido. El resumen global de errores sigue representando el formulario completo. Probalo enviando vacío el ejemplo de Solapas del Lab.

hideSingleTab

hideSingleTab?: boolean controla solamente la barra visual de solapas:

Solapas	hideSingleTab	Resultado
1	undefined o false	La solapa es visible.
1	true	Se oculta la barra visual de solapas.
2 o más	true	Las solapas siguen visibles.

Nunca elimina el contenido de la solapa.

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

helpUrl

helpUrl pertenece a una solapa. DYONA Form muestra su icono compacto de ayuda a la derecha de las solapas solo cuando la solapa activa tiene una URL; cambia al cambiar la solapa activa y abre la URL en una pestaña nueva:

{
  id: 'commercial',
  title: 'Información comercial',
  helpUrl: 'https://example.com/customer-credit-policy',
  rows: [/* rows de esta solapa */],
}

Próximos pasos

• Validación
• Condiciones