Utilidad de Box Shadow
¿Qué es la utilidad de Box Shadow?
La utilidad de Box Shadow proporciona una forma consistente y tipada de manejar sombras en la interfaz de usuario.
Permite crear sombras con diferentes propiedades como desplazamiento, desenfoque, extensión y color.
¿Cómo se utiliza la utilidad de Box Shadow?
Para utilizar las sombras, se debe importar la interfaz BoxShadow y luego crear objetos con sus propiedades.
import { BoxShadow } from "@seigenta/TypesCraft/widgets/utils/box-shadow";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";
// El resto de tu código
const miSombra: BoxShadow = {
hOffset: Size.px(5),
vOffset: Size.px(5),
blur: Size.px(10),
color: Color.black()
};
// El resto de tu código
Propiedades
BoxShadow tiene las siguientes propiedades opcionales:
- hOffset?: (Size) - Desplazamiento horizontal de la sombra
hOffset: Size.px(5) // 5 píxeles a la derecha hOffset: Size.px(-5) // 5 píxeles a la izquierda - vOffset?: (Size) - Desplazamiento vertical de la sombra
vOffset: Size.px(5) // 5 píxeles hacia abajo vOffset: Size.px(-5) // 5 píxeles hacia arriba - blur?: (Size) - Radio de desenfoque de la sombra
blur: Size.px(10) // Sombra más difusa blur: Size.px(0) // Sombra nítida - spread?: (Size) - Extensión de la sombra
spread: Size.px(5) // Sombra más grande spread: Size.px(-5) // Sombra más pequeña - color?: (Color) - Color de la sombra
color: Color.black() // Sombra negra color: Color.RGBo(0, 0, 0, 0.5) // Sombra negra con 50% de opacidad - inset?: (boolean) - Si la sombra es interna
inset: true // Sombra interna inset: false // Sombra externa (por defecto)
Uso en Componentes
Las sombras se pueden utilizar en cualquier componente que acepte propiedades de estilo:
import Container, { ContainerStyle } from "@seigenta/TypesCraft/widgets/containers/container";
import { BoxShadow } from "@seigenta/TypesCraft/widgets/utils/box-shadow";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";
new Container({
style: new ContainerStyle({
boxShadow: [{
hOffset: Size.px(5),
vOffset: Size.px(5),
blur: Size.px(10),
spread: Size.px(0),
color: Color.black(),
inset: false
}]
})
});
En el ejemplo anterior, se crea un nuevo container con una sombra externa negra. Pero puede ser cualquier otro componente que acepte propiedades de estilo.
Nota: La propiedad boxShadow acepta un array de BoxShadow, lo que permite aplicar múltiples sombras al mismo elemento.