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 Design, Actions y Advanced 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 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 | 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 que figura 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.