Utilidad de EdgeSize

¿Qué es la utilidad de EdgeSize?

EdgeSize es un elemento especial que permite definir el padding de los componentes de manera flexible y tipada.

Permite establecer el padding de diferentes formas según las necesidades del diseño.

Para utilizar EdgeSize, se debe importar la clase y luego usar sus métodos estáticos.

import EdgeSize from "@seigenta/TypesCraft/widgets/utils/edgeSize";
import Size from "@seigenta/TypesCraft/widgets/utils/size";

// El resto de tu código
const padding = EdgeSize.all(Size.px(10));
// El resto de tu código

EdgeSize.all

Define el padding en los 4 lados del componente:

import EdgeSize from "@seigenta/TypesCraft/widgets/utils/edgeSize";
import Size from "@seigenta/TypesCraft/widgets/utils/size";

const padding = EdgeSize.all(Size.px(10)); // 10px en todos los lados

EdgeSize.symetric

Define el padding horizontal y vertical del componente:

import EdgeSize from "@seigenta/TypesCraft/widgets/utils/edgeSize";
import Size from "@seigenta/TypesCraft/widgets/utils/size";

const padding = EdgeSize.symetric({
  horizontal: Size.px(10), // 10px horizontal
  vertical: Size.percent(5) // 5% vertical
});

EdgeSize.only

Define el padding en lados específicos del componente:

import EdgeSize from "@seigenta/TypesCraft/widgets/utils/edgeSize";
import Size from "@seigenta/TypesCraft/widgets/utils/size";

const padding = EdgeSize.only({
  top: Size.percent(5),    // 5% superior
  bottom: Size.percent(5), // 5% inferior
  left: Size.px(10),      // 10px izquierdo
  right: Size.px(10)      // 10px derecho
});

Uso en Componentes

EdgeSize se utiliza principalmente en componentes que aceptan propiedades de estilo, como Container:

import Container from "@seigenta/TypesCraft/widgets/containers/container";
import EdgeSize from "@seigenta/TypesCraft/widgets/utils/edgeSize";
import Size from "@seigenta/TypesCraft/widgets/utils/size";

new Container({
  child: ...,
  style: new ContainerStyle({
    padding: EdgeSize.all(Size.px(10))
  })
});

En el ejemplo anterior, se crea un nuevo componente Container con un padding de 10px en todos sus lados. EdgeSize puede ser utilizado en cualquier componente que acepte propiedades de estilo relacionadas con el padding.