Casos de uso/Showcase de modos de presentación
🎨Showcase de modos de presentación

Un formulario, cinco presentaciones

El mismo formulario base de Crédito Personal renderizado en 5 modos distintos. Las secciones y campos nunca cambian — solo cambia el layout visual.

Arquitectura desacoplada

La estructura del formulario (secciones, campos, validaciones, dependencias) es completamente independiente del modo de presentación (layout, navegación, render visual).

Estructura baseSeccionesCamposValidacionesDependencias+Motor de presentaciónLayoutNavegación

Demo interactivo en vivo

Cambia el modo sin perder datos

Modo de visualización

Cambia el layout sin perder datos ni reconstruir el formulario

Formulario: Crédito Personal · Modo activo: Página única

✓ Datos preservados al cambiar modo

Información del asociado

Datos de contacto

Datos de la solicitud

Autorizaciones generales

Autorización de tratamiento de datos personales

De conformidad con la Ley 1581 de 2012 y el Decreto 1377 de 2013, autorizo de manera voluntaria, previa, explícita, informada e inequívoca a la entidad para recolectar, almacenar, usar, circular, suprimir, procesar, compilar, intercambiar, dar tratamiento, actualizar y disponer de los datos suministrados en este formulario...

Firma digital

Complete los datos del firmante:

Área de firma digital

Los 5 modos en detalle

Haz clic en "Ver demo" para expandir cada modo. Todos usan exactamente el mismo formulario base.

📄

Crédito Personal — Página única

Todas las secciones visibles con scroll vertical

🧭

Crédito Personal — Wizard multi-paso

Una sección por paso con stepper y navegación

📑

Crédito Personal — Tabs horizontales

Pestañas superiores para cambio inmediato de sección

📋

Crédito Personal — Tabs verticales

Menú lateral izquierdo con contenido a la derecha

🪗

Crédito Personal — Paneles expandibles

Acordeón — expandir y contraer secciones individualmente

Comparador de modos

ModoIdeal paraMejor experiencia en
📄 Página únicaFormularios cortos, acceso rápidoMobile, formularios simples
🧭 Wizard multi-pasoFormularios largos y complejosOnboarding, solicitudes extensas
📑 Tabs horizontalesDesktop corporativo, secciones clarasBackoffice, formularios medianos
📋 Tabs verticalesFormularios muy complejos con muchas seccionesFormularios enterprise, muchos campos
🪗 Paneles expandiblesMobile / UX rápida, revisión selectivaRevisión de datos, formularios largos