¿Qué es el componente Column?

El componente Column es un contenedor que organiza sus hijos en una columna vertical. Permite controlar la alineación, espaciado y dimensiones de los elementos hijos.

¿Cómo se utiliza el componente Column?

Para usar el componente Column, importa la clase y configura sus propiedades:

import Column, { ColumnStyle } from "@seigenta/TypesCraft/widgets/column";
import { MainAxisAlign, CrossAxisAlign } from "@seigenta/TypesCraft/widgets/properties_flexs";
import { Size, EdgeSize } from "@seigenta/TypesCraft/widgets/utils";

// Uso básico
new Column({
    children: [widget1, widget2],
    style: new ColumnStyle({
        mainAxisAlign: MainAxisAlign.center(),
        crossAxisAlign: CrossAxisAlign.center()
    })
})
          

Propiedades del componente

El componente Column acepta las siguientes propiedades:

• children: (Widget[]) - Lista de widgets hijos (requerido)
• style?: (ColumnStyle) - Estilo del column
• styleHover?: (ColumnStyle) - Estilo al pasar el mouse
• id?: (string) - Identificador único
• key?: (string) - Clave para reconciliación

ColumnStyle - Propiedades de estilo

El objeto ColumnStyle permite configurar:

• crossAxisAlign?: (CrossAxisAlign) - Alineación en el eje cruzado
• mainAxisAlign?: (MainAxisAlign) - Alineación en el eje principal
• mainAxisJustify?: (MainAxisJustify) - Justificación en el eje principal
• mainAxisSize?: (MainAxisSize) - Tamaño en el eje principal
• spacing?: (Size) - Espaciado entre hijos
• padding?: (EdgeSize) - Relleno interno
• backgroundColor?: (Color) - Color de fondo
• width?: (Size) - Ancho del contenedor
• height?: (Size) - Alto del contenedor

Ejemplos de uso

Ejemplo básico con espaciado y alineación:

new Column({
    children: [widget1, widget2],
    style: new ColumnStyle({
        spacing: Size.px(10),
        crossAxisAlign: CrossAxisAlign.center(),
        padding: EdgeSize.all(Size.px(40))
    })
})
          

Ejemplo con efectos hover:

new Column({
    children: [widget1, widget2],
    style: new ColumnStyle({
        backgroundColor: Color.hex('#fff')
    }),
    styleHover: new ColumnStyle({
        backgroundColor: Color.hex('#f0f0f0')
    })
})
          

Comportamiento

El componente Column:

• Organiza los hijos en una columna vertical (flex-direction: column)
• Permite múltiples opciones de alineación y distribución
• Genera estilos CSS eficientes reutilizables
• Soporta estilos hover para efectos interactivos