¿Qué es el componente de Flex?

El componente Flex permite organizar elementos en una dirección específica (fila o columna) con diferentes opciones de alineación y justificación. Nota: Los estilos mostrados en los ejemplos son ilustrativos, puedes personalizarlos según tus necesidades.

¿Cómo se utiliza el componente de Flex?

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

  import Flex, { FlexStyle, FlexDirection } from "@seigenta/TypesCraft/widgets/containers/flex";
  import Text from "@seigenta/TypesCraft/widgets/texts/text";
  
  // El resto de tu código
  new Flex({
      children: [
          new Text({
              text: "Primer elemento"
          }),
          new Text({
              text: "Segundo elemento"
          })
      ],
      style: new FlexStyle({
          direction: FlexDirection.column
      })
  })
            

En el ejemplo anterior, se crea un nuevo componente Flex con dos elementos Text organizados en dirección de columna.

Parámetros

El componente Flex acepta los siguientes parámetros:

• children: Widget[] - Los elementos hijos que se organizarán dentro del Flex.
• style?: FlexStyle - Estilos para el componente Flex.
• styleHover?: FlexStyle - Estilos que se aplicarán cuando el usuario pase el cursor sobre el componente.
• id?: string - Identificador opcional para el componente.
• key?: string - Clave opcional para el componente.

Importancia de la propiedad "key" para elementos dinámicos

Cuando se generan elementos de forma dinámica dentro de un Flex (por ejemplo, a partir de una lista o array), es altamente recomendable utilizar la propiedad "key" en cada elemento hijo. Esta propiedad, que todos los widgets poseen, permite que el componente Flex reconozca la identidad única de cada elemento dentro de su estructura.

Sin el uso adecuado de "key":

• Los elementos se ajustarán según su posición en el array
• Se producirá una reconstrucción innecesaria de elementos cuando el orden o contenido cambie
• El rendimiento puede verse afectado negativamente en listas grandes o con actualizaciones frecuentes

Ejemplo de uso correcto de "key" en elementos dinámicos:

  import Flex, { FlexStyle } from "@seigenta/TypesCraft/widgets/containers/flex";
  import Text from "@seigenta/TypesCraft/widgets/texts/text";
  
  // Lista de elementos dinámica
  const elementosTexto = ["Primero", "Segundo", "Tercero"];
  
  // Uso correcto con 'key' en cada elemento
  new Flex({
      children: elementosTexto.map((texto, index) => {
          return new Text({
              text: texto,
              key: `texto-${index}`  // Key única para cada elemento
          });
      })
  })
            

Estilos (FlexStyle)

FlexStyle tiene las siguientes propiedades:

• direction: (FlexDirection) - Define la dirección principal en la que se organizarán los elementos.
  • FlexDirection.row - Organiza los elementos en una fila (horizontal).
  • FlexDirection.column - Organiza los elementos en una columna (vertical).
• crossAxisAlign: (CrossAxisAlign) - Define cómo se alinean los elementos en el eje cruzado.
  • CrossAxisAlign.start - Alinea los elementos al inicio del eje cruzado.
  • CrossAxisAlign.end - Alinea los elementos al final del eje cruzado.
  • CrossAxisAlign.center - Alinea los elementos al centro del eje cruzado.
  • CrossAxisAlign.stretch - Estira los elementos para ocupar todo el espacio disponible en el eje cruzado.
• mainAxisAlign: (MainAxisAlign) - Define cómo se alinean los elementos en el eje principal.
  • MainAxisAlign.start - Alinea los elementos al inicio del eje principal.
  • MainAxisAlign.end - Alinea los elementos al final del eje principal.
  • MainAxisAlign.center - Alinea los elementos al centro del eje principal.
  • MainAxisAlign.stretch - Estira los elementos para ocupar todo el espacio disponible en el eje principal.
• mainAxisJustify: (MainAxisJustify) - Define cómo se distribuye el espacio entre los elementos en el eje principal.
  • MainAxisJustify.start - Coloca los elementos al inicio del eje principal.
  • MainAxisJustify.end - Coloca los elementos al final del eje principal.
  • MainAxisJustify.center - Coloca los elementos en el centro del eje principal.
  • MainAxisJustify.spaceBetween - Distribuye el espacio uniformemente entre los elementos.
  • MainAxisJustify.spaceAround - Distribuye el espacio uniformemente alrededor de los elementos.
  • MainAxisJustify.spaceEvenly - Distribuye el espacio uniformemente entre y alrededor de los elementos.
• mainAxisSize: (MainAxisSize) - Define cómo el Flex ocupa el espacio disponible en el eje principal.
  • MainAxisSize.min - El Flex solo ocupará el espacio mínimo necesario para contener sus elementos hijos.
  • MainAxisSize.max - El Flex ocupará todo el espacio disponible en el eje principal.
• spacing: (Size) - Define el espacio entre los elementos. Se aplica un valor Size que ya está documentado en Size.
• css: (Css) - Permite añadir estilos CSS personalizados. Más información en la documentación de CSS.
• width?: (Size) - Ancho del contenedor Flex.
• height?: (Size) - Alto del contenedor Flex.
• padding?: (EdgeSize) - Relleno interno del contenedor Flex.

Ejemplo Completo

  import Flex, { FlexStyle, FlexDirection, CrossAxisAlign, MainAxisJustify, MainAxisSize } from "@seigenta/TypesCraft/widgets/containers/flex";
  import Text from "@seigenta/TypesCraft/widgets/texts/text";
  import Size from "@seigenta/TypesCraft/widgets/utils/size";
  
  // El resto de tu código
  new Flex({
      style: new FlexStyle({
          direction: FlexDirection.column,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlign: CrossAxisAlign.center,
          mainAxisJustify: MainAxisJustify.spaceAround(),
          spacing: Size.px(10)
      }),
      children: [
          new Text({
              text: "Primer elemento"
          }),
          new Text({
              text: "Segundo elemento"
          }),
          new Text({
              text: "Tercer elemento"
          })
      ]
  })
            

En el ejemplo anterior, se crea un componente Flex con tres elementos Text. Los elementos están organizados en una columna, centrados en el eje cruzado, con un espaciado uniforme alrededor de ellos en el eje principal, y con un espacio de 10px entre cada elemento. El Flex ocupará solo el espacio mínimo necesario para contener sus elementos.