¿Qué es el componente Stack?

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

¿Cómo se utiliza el componente Stack?

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

import Stack, { StackStyle } from "@seigenta/TypesCraft/widgets/stack";
import { ContainerAlingment } from "@seigenta/TypesCraft/widgets/container";
import { Size, EdgeSize } from "@seigenta/TypesCraft/widgets/utils";

// Uso básico
new Stack({
    children: [widget1, widget2],
    style: new StackStyle({
        containerAlignment: ContainerAlingment.center()
    })
})
          

Propiedades del componente

El componente Stack acepta las siguientes propiedades:

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

StackStyle - Propiedades de estilo

El objeto StackStyle permite configurar:

• containerAlignment?: (ContainerAlingment) - Alineación de los hijos dentro del stack
• backgroundColor?: (Color) - Color de fondo
• padding?: (EdgeSize) - Relleno interno
• width?: (Size) - Ancho del contenedor
• height?: (Size) - Alto del contenedor
• css?: (Css) - Estilos CSS personalizados

Ejemplos de uso

Ejemplo básico con alineación centrada:

new Stack({
    children: [widget1, widget2],
    style: new StackStyle({
        containerAlignment: ContainerAlingment.center(),
        padding: EdgeSize.all(Size.px(10)),
        backgroundColor: Color.hex("#f0f0f0")
    })
})
          

Ejemplo avanzado con dimensiones fijas:

new Stack({
    children: [widget1, widget2, widget3],
    style: new StackStyle({
        width: Size.px(300),
        height: Size.percent(100),
        padding: EdgeSize.symmetric({
            horizontal: Size.px(15),
            vertical: Size.px(10)
        })
    })
})
          

Comportamiento

El componente Stack:

• Organiza los hijos en una pila vertical
• Permite múltiples opciones de alineación (top, center, bottom, etc.)
• Genera estilos CSS eficientes reutilizables
• Soporta estilos hover para efectos interactivos
• Envuelve cada hijo en un div con clase 'stack-child' para aplicar la alineación