Utilidad de Border Style

¿Qué es la utilidad de Border Style?

La utilidad de Border Style proporciona una forma consistente y tipada de manejar bordes en la interfaz de usuario.

Permite crear bordes de diferentes estilos, colores y grosores de manera sencilla.

¿Cómo se utiliza la utilidad de Border Style?

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

import BorderStyle, { StyleBorder } from "@seigenta/typescraft/widgets/utils/border";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";

// El resto de tu código
const miBorde = BorderStyle.all({
  border: {
    color: Color.red(),
    styleBorder: StyleBorder.solid,
    width: Size.px(2)
  }
});
// El resto de tu código

Constructores

BorderStyle tiene tres constructores principales:

  • BorderStyle.all({border}) - Aplica el mismo borde en todos los lados 
    BorderStyle.all({
  border: {
    color: Color.red(),
    styleBorder: StyleBorder.solid,
    width: Size.px(2)
  }
});
  • BorderStyle.only({top, right, bottom, left}) - Aplica bordes específicos en cada lado 
    BorderStyle.only({
  top: {
    color: Color.red(),
    styleBorder: StyleBorder.solid,
    width: Size.px(2)
  },
  right: {
    color: Color.blue(),
    styleBorder: StyleBorder.dashed,
    width: Size.px(1)
  }
});
  • BorderStyle.symetric({vertical, horizontal}) - Aplica bordes simétricos verticales y horizontales 
    BorderStyle.symetric({
  vertical: {
    color: Color.red(),
    styleBorder: StyleBorder.solid,
    width: Size.px(2)
  },
  horizontal: {
    color: Color.blue(),
    styleBorder: StyleBorder.dashed,
    width: Size.px(1)
  }
});

Interfaz Border

La interfaz Border define las propiedades de un borde:

  • color: (Color) - Color del borde
  • styleBorder: (StyleBorder) - Estilo del borde
  • width: (Size) - Ancho del borde

Estilos de Borde

StyleBorder es un enum que define los diferentes estilos de borde disponibles:

  • StyleBorder.solid - Borde sólido
  • StyleBorder.dotted - Borde punteado
  • StyleBorder.dashed - Borde discontinuo
  • StyleBorder.double - Borde doble
  • StyleBorder.ridge - Borde en relieve
  • StyleBorder.inset - Borde hundido
  • StyleBorder.outset - Borde elevado
  • StyleBorder.none - Sin borde

Uso en Componentes

Los bordes se pueden utilizar en cualquier componente que acepte propiedades de estilo:

import Container, { ContainerStyle } from "@seigenta/TypesCraft/widgets/containers/container";
import BorderStyle, { StyleBorder } from "@seigenta/typescraft/widgets/utils/border";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";

new Container({
  style: new ContainerStyle({
    border: BorderStyle.all({
      border: {
        color: Color.red(),
        styleBorder: StyleBorder.solid,
        width: Size.px(2)
      }
    })
  })
});

En el ejemplo anterior, se crea un nuevo container con un borde rojo sólido de 2px. Pero puede ser cualquier otro componente que acepte propiedades de estilo.