Flex Container
Flex Container es un componente de contenedor que permite agregar otros componentes en su interior. Facilita el posicionamiento y la alineación de los distintos componentes incluidos, y organiza el espacio ocupado por el componente en la pantalla. Para insertar el componente Flex Container en la pantalla, ve al panel izquierdo en el constructor visual. Recorre la lista de componentes para encontrar el componente Flex Container o haz clic en la barra de búsqueda y escribe el nombre. A continuación, arrastra y suelta el componente en el canvas y configura sus atributos en el panel derecho. Consulta las siguientes secciones para obtener más información.
Importante
El componente Flex Container puede utilizarse en apps web y móviles (tanto en dispositivos Android como iOS).
Attributes
En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta las secciones a continuación para obtener más información.
Design
En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.
En esta sección, puedes definir los ajustes del fondo del componente. Consulta la tabla a continuación para obtener más información.
Flat | Haz clic en el botón de opción Flat para establecer un único color para el fondo del componente. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. Luego, selecciona un color o introduce el código de color hexadecimal. También puedes establecer el porcentaje de opacidad fuera del selector de color en el campo Opacity. Si previamente seleccionaste un color en el selector de color, la opacidad se establece en 100 por defecto. Si no seleccionaste ningún color, este campo estará vacío. Para modificarlo, haz clic en el campo e introduce el porcentaje deseado. |
Gradient | Haz clic en el botón de opción Gradient para establecer un degradado de color para el fondo del componente. Haz clic en cada uno de los íconos cuadrados de bordes redondeados para abrir el selector de color. En el selector de color, introduce el código de color hexadecimal en el campo correspondiente. Haz clic en |
Background Image | Haz clic en la casilla de verificación Image para añadir una imagen al fondo del componente. Puedes utilizar una imagen de fondo con las opciones de fondo Flat y Gradient. Haz clic en el campo Background Image y escribe el nombre de la imagen de fondo, o haz clic en el ícono de carga para abrir el selector de imágenes. Selecciona una de las imágenes de la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. |
Nota
Si seleccionas el fondo Flat, no podrás elegir el fondo Gradient y viceversa. La opción Background Image está disponible en ambos casos.
En esta sección, puedes configurar cómo se muestran los componentes dentro del contenedor flex. Consulta la siguiente tabla para obtener más información.
Direction | Dirección de los componentes dentro del contenedor flex. Haz clic en Row para que los componentes secundarios se organicen en filas o en Column para que se organicen en columnas. También puedes hacer clic en el ícono de las flechas de doble sentido ( NotaLas opciones de alienación y justificación cambian en función de la dirección seleccionada. |
Align | Alineación de los componentes dentro del contenedor flex con respecto al espacio del contenedor. Si has seleccionado Row en la sección Direction, haz clic en una opción para definir la alineación de los componentes a los cuales debes considerar como si estuvieran en una fila. Si has seleccionado Column en la sección Direction, haz clic en una opción para definir la alineación de los componentes a los cuales debes considerar como si estuvieran en una columna. Las opciones disponibles son: Start, Center, End, Stretch, Baseline. |
Justify | Justificación de los componentes dentro del contenedor flex con respecto al espacio del contenedor. Las opciones disponibles son: Start, Center, End, Space between, Space around. |
Children | Organización de los componentes cuando se alcanza la anchura máxima del contenedor flex. Haz clic en Don't Wrap para que los componentes que superen la anchura máxima del contenedor no se coloquen debajo del resto de los componentes, en Wrap para que los componentes que superen la anchura máxima del contenedor se coloquen debajo del resto de los componentes. A continuación, selecciona una de las opciones de ajuste para que los componentes se organicen según un área específica del contenedor flex. Las opciones disponibles son: Start, Center, End, Stretch, Space between o Space around. También puedes hacer clic en el ícono de las flechas de doble sentido ( |
En esta sección, puedes configurar los atributos para establecer las propiedades de margen y relleno. Consulta la siguiente tabla para obtener más información.
Propiedades de relleno | Espacio entre el borde del componente y el contenido del componente (valor). Introduce un valor para cada una de las propiedades de relleno: Padding Top, Padding Left, Padding Bottom and Padding Right. Puedes hacer clic en la flecha situada a la derecha de cada campo de relleno y seleccionar la unidad de medida deseada en el menú desplegable. |
Propiedades de los márgenes | Espacio alrededor del borde de un componente. Introduzca un valor para cada una de las propiedades de margen: Margen superior, margen izquierdo, margen inferior y margen derecho. Para definir la unidad de medida, haz clic en la flecha del campo de la derecha y selecciona una opción del menú desplegable. |
Si arrastras y sueltas un componente text input, text label , button, image o flex container dentro de un contenedor flex primario, la sección Margins & alignment no aparecerá disponible para su configuración en la pestaña Design. En su lugar, debes configurar la sección Spacing para definir las propiedades de relleno del margen para los cinco componentes mencionados. Consulta la imagen comentada a continuación para obtener más información.
Sugerencia
Para identificar si un componente está colocado dentro del contenedor flex, comprueba el Treeview en el constructor visual.
Margin properties. Para configurar los márgenes, haz clic en el campo numérico de cada margen (izquierdo, derecho, superior, inferior) e introduce el valor deseado. A continuación, haz clic en la unidad de medida situada a la derecha y selecciona una opción de la lista.
Padding properties. Para configurar el relleno de los lados del componente, haz clic en el campo numérico de cada propiedad de relleno (izquierda, derecha, arriba, abajo) e introduce el valor deseado. A continuación, haz clic en la unidad de medida situada a la derecha y selecciona una opción de la lista.
Actions
En la pestaña Actions, puedes establecer animaciones para los componentes de la pantalla de tu app y determinar cómo el usuario invoca efectos y desencadena acciones mientras interactúa con la app. Consulta las secciones a continuación para obtener más información.
Advanced
En la pestaña Advanced, puedes configurar atributos avanzados para el componente. Consulta las secciones a continuación para obtener más información.