COLUMN

El componente COLUMN crea una columna contenedora para organizar componentes de forma vertical.

Se utiliza para agrupar y distribuir componentes UI en una columna, permitiendo layouts flexibles y responsivos.

Propósito

COLUMN permite a los desarrolladores:

• Organizar componentes en disposición vertical
• Crear layouts complejos y responsivos
• Controlar el espaciado y alineación de componentes
• Facilitar la estructura visual de formularios y dashboards
• Definir altura de filas y comportamiento responsive

Propiedades

Propiedad	Tipo	Obligatorio	Valor predeterminado	Descripción
type	string	Sí	—	Debe ser COLUMN
name	string	Sí	—	Identificador del componente
gap	number	No	2	Espaciado entre elementos en la columna (valores de 0 a 5)
cssClass	string	No	""	Clase CSS adicional para personalizar el estilo
cssStyle	string	No	""	Estilos CSS en línea para personalizar el componente
visible	boolean	No	true	Indica si el componente es visible
children	array	Sí	—	Array de componentes contenidos en la columna

Ejemplo de uso

type: COLUMN
name: form_column
gap: 2
children:
  - type: DISPLAY
    name: form_title
    style: subtitle
    template: Formulario de registro
  - type: FORM
    name: user_form
    items:
      - type: TEXT_FIELD
        name: email
        label: Correo
      - type: TEXT_FIELD
        name: password
        label: Contraseña
  - type: BUTTON
    name: submit_btn
    label: Registrarse

Notas importantes

• COLUMN utiliza flexbox internamente para gestionar la distribución
• El gap define el espaciado entre elementos adyacentes
• Se puede anidar cualquier componente dentro de un COLUMN, pero no puede ser otro COLUMN
• COLUMN y ROW pueden anidarse para crear layouts complejos