¿Qué es el componente de container?

El componente de container permite envolver otro componentes y agregar elementos esteticos como lo puede un background. Nota: Los colores y estilos mostrados en los ejemplos son ilustrativos, puedes personalizarlos según tus necesidades.

¿Cómo se utiliza el componente de container?

Para utilizar el componente de container, se debe importar y luego usar en el código.

  import Container, { ContainerStyle } from "@seigenta/TypesCraft/widgets/containers/container";
  import Color from "@seigenta/TypesCraft/widgets/utils/color";
  
  // El resto de tu código
  new Container({
      child: ... // Aqui va el componente que quieres envolver,
      style: new ContainerStyle({
          backgroundColor: Color.red()
      }),
      styleHover: new ContainerStyle({
          backgroundColor: Color.blue()
      }),
      id: "mi-container",
      key: "container-1"
  })
              

En el ejemplo anterior, se crea un nuevo componente de container con un background de color rojo. Dentro de este container puedes agregar cualquier otro componente, como un Text.

  import Container, { ContainerStyle } from "@seigenta/TypesCraft/widgets/containers/container";
  import Text from "@seigenta/TypesCraft/widgets/texts/text";
  import Color from "@seigenta/TypesCraft/widgets/utils/color";
  
  // El resto de tu código
  new Container({
      child: Text({
          text: "Este es un texto dentro de un container de color rojo",
      }),
      style: new ContainerStyle({
          background: Color.red()
      })
  })
              

Styles

Este elemento tiene sus propias variables de estilo.

• backgroundColor?: (Color) - Define el color de fondo del container.
  • Color - Puede ser un color en formato hexadecimal o un color de la paleta de colores. Se explico en Color.
• padding?: (EdgeSize) - Define el padding del container. EdgeSize es un elemento especial que recibe como parametro un Size (Explicado en Text), segun este parametro se define el padding.
  • EdgeSize.all(Size.px(10)) - Define el padding en los 4 lados del container, en este caso 10px.
  • EdgeSize.symetric({horizontal: Size.px(10), vertical: Size.percent(5)} }) - Define el padding horizontal y vertical del container, en este caso 10px horizontal y 5% vertical.
  • EdgeSize.only({top: Size.percent(5), bottom: Size.percent(5)}) - Define el padding en la parte superior e inferior del container, en este caso 5%. tambien estan las variables left y right.
• height?: (Size) - Define la altura del container. Como recibe un elemento del tipo Size no requiere explicación adicional. Se explico en Size.
• width?: (Size) - Define el ancho del container. Como recibe un elemento del tipo Size no requiere explicación adicional. Se explico en Size.
• containerAlingment?: (ContainerAlingment) - Define la alineación del container. Tenemos una gran variedad de alineaciones, las cuales son:
  • ContainerAlingment.leftTop - Alinea el contenido en la esquina superior izquierda.
  • ContainerAlingment.leftCenter - Alinea el contenido en el centro izquierdo.
  • ContainerAlingment.leftBottom - Alinea el contenido en la esquina inferior izquierda.
  • ContainerAlingment.centerTop - Alinea el contenido en el centro superior.
  • ContainerAlingment.center - Alinea el contenido en el centro.
  • ContainerAlingment.centerBottom - Alinea el contenido en el centro inferior.
  • ContainerAlingment.rightTop - Alinea el contenido en la esquina superior derecha.
  • ContainerAlingment.rightCenter - Alinea el contenido en el centro derecho.
  • ContainerAlingment.rightBottom - Alinea el contenido en la esquina inferior derecha.
• border?: (BorderStyle) - Define el borde del container. BorderStyle tiene tres constructores:
  • BorderStyle.only({top, right, bottom, left}) - Define el borde en lados específicos.
  • BorderStyle.all({border}) - Define el mismo borde en todos los lados.
  • BorderStyle.symetric({vertical, horizontal}) - Define el borde vertical y horizontal.
  Cada borde (Border) tiene las siguientes propiedades:
  • color: (Color) - Color del borde
  • styleBorder: (StyleBorder) - Estilo del borde (solid, dotted, dashed, double, ridge, inset, outset, none)
  • width: (Size) - Ancho del borde
• boxShadow?: (BoxShadow[]) - Define las sombras del container. Cada BoxShadow tiene las siguientes propiedades:
  • hOffset?: (Size) - Desplazamiento horizontal
  • vOffset?: (Size) - Desplazamiento vertical
  • blur?: (Size) - Desenfoque
  • spread?: (Size) - Extensión
  • color?: (Color) - Color de la sombra
  • inset?: (boolean) - Si la sombra es interna
• css?: (Css) - Define estilos CSS personalizados para el container.

Ejemplo

  import Container, { ContainerStyle, ContainerAlingment, BorderStyle, StyleBorder } from "@seigenta/TypesCraft/widgets/containers/container";
  import Text from "@seigenta/TypesCraft/widgets/texts/text";
  import Color from "@seigenta/TypesCraft/widgets/utils/color";
  import Size from "@seigenta/TypesCraft/widgets/utils/size";
  import EdgeSize from "@seigenta/TypesCraft/widgets/utils/edgeSize";
  import BoxShadow from "@seigenta/TypesCraft/widgets/utils/boxShadow";
  import { Css } from "@seigenta/TypesCraft/global/style";
  
  new Container({
      child: Text({
          text: "Este es un texto dentro de un container con borde y sombra",
      }),
      style: new ContainerStyle({
          backgroundColor: Color.red(),
          padding: EdgeSize.all(Size.px(10)),
          height: Size.percent(50),
          width: Size.percent(50),
          containerAlingment: ContainerAlingment.center(),
          border: BorderStyle.all({
              border: {
                  color: Color.black(),
                  styleBorder: StyleBorder.solid,
                  width: Size.px(2)
              }
          }),
          boxShadow: [{
              hOffset: Size.px(5),
              vOffset: Size.px(5),
              blur: Size.px(10),
              color: Color.black(),
              inset: false
          }]
      }),
      styleHover: new ContainerStyle({
          backgroundColor: Color.blue(),
          border: BorderStyle.all({
              border: {
                  color: Color.white(),
                  styleBorder: StyleBorder.dashed,
                  width: Size.px(3)
              }
          })
      }),
      id: "mi-container",
      key: "container-1"
  })
              

En el ejemplo anterior, se crea un nuevo componente de container con un background de color rojo, un padding de 10px, una altura y ancho del 50% y se alinea en el centro.

Compilador de container

Este compilador te permite crear un componente de container en tiempo real.