Utilidad de Size
¿Qué es la utilidad de tamaños?
La utilidad de tamaños proporciona una forma consistente y tipada de manejar dimensiones en la interfaz de usuario.
Permite definir tamaños de diferentes formas y aplicarlos a los componentes de manera sencilla.
¿Cómo se utiliza la utilidad de tamaños?
Para utilizar los tamaños, se debe importar la clase Size y luego usar sus métodos estáticos.
import Size from "@seigenta/TypesCraft/widgets/utils/size";
// El resto de tu código
const miTamaño = Size.rem(2);
// El resto de tu código
Métodos Disponibles
La utilidad proporciona varios métodos para definir tamaños:
- Size.px(value:number) - Tamaño en píxeles.
- Size.percent(value:number) - Tamaño en porcentaje.
- Size.em(value:number) - Tamaño relativo a la fuente del elemento padre.
- Size.rem(value:number) - Tamaño relativo a la fuente del elemento raíz. Es el más utilizado.
- Size.vw(value:number) - Tamaño relativo al ancho de la pantalla.
- Size.vh(value:number) - Tamaño relativo al alto de la pantalla.
Métodos Adicionales
- Size.fill() - Tamaño ajustado al contenedor.
- Size.fit() - Tamaño ajustado al contenedor.
- Size.min() - Tamaño mínimo del contenedor.
- Size.max() - Tamaño máximo del contenedor.
- Size.extend() - Tamaño ajustado al contenedor.
- new.Size(value:string) - Permite establecer el tamaño de forma personalizada con un string CSS.
Tamaños en Píxeles
Puedes definir tamaños usando píxeles:
import Size from "@seigenta/TypesCraft/widgets/utils/size";
const tamañoPx = Size.px(16); // 16 píxeles
Tamaños en REM
Los tamaños en REM son relativos al tamaño de fuente del elemento raíz:
import Size from "@seigenta/TypesCraft/widgets/utils/size";
const tamañoRem = Size.rem(2); // 2 veces el tamaño de fuente base
Tamaños en EM
Los tamaños en EM son relativos al tamaño de fuente del elemento padre:
import Size from "@seigenta/TypesCraft/widgets/utils/size";
const tamañoEm = Size.em(1.5); // 1.5 veces el tamaño de fuente del padre
Uso en Componentes
Los tamaños se pueden utilizar en cualquier componente que acepte propiedades de estilo:
import Text from "@seigenta/TypesCraft/widgets/texts/text";
import Size from "@seigenta/TypesCraft/widgets/utils/size";
new Text({
text: "Texto con tamaño personalizado",
style: {
fontSize: Size.rem(2)
}
});