¿Qué es el componente Row?

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

¿Cómo se utiliza el componente Row?

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

import Row, { RowStyle } from "@seigenta/TypesCraft/widgets/row";
import { MainAxisAlign, CrossAxisAlign } from "@seigenta/TypesCraft/widgets/properties_flexs";
import { Size, EdgeSize } from "@seigenta/TypesCraft/widgets/utils";

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

Propiedades del componente

El componente Row acepta las siguientes propiedades:

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

RowStyle - Propiedades de estilo

El objeto RowStyle 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 alineación centrada:

new Row({
    children: [widget1, widget2],
    style: new RowStyle({
        mainAxisAlign: MainAxisAlign.center(),
        crossAxisAlign: CrossAxisAlign.center(),
        padding: EdgeSize.all(Size.px(10)),
        backgroundColor: Color.hex("#f0f0f0")
    })
})
          

Ejemplo avanzado con espaciado y justificación:

new Row({
    children: [widget1, widget2, widget3],
    style: new RowStyle({
        mainAxisJustify: MainAxisJustify.spaceBetween(),
        spacing: Size.px(20),
        width: Size.percent(100),
        padding: EdgeSize.symmetric({
            horizontal: Size.px(15),
            vertical: Size.px(10)
        })
    })
})
          

Comportamiento

El componente Row:

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