Flex Container
Plataformas | Apps web y móviles |
Sistemas operativos | Android (versión 7.7.2 en adelante) e iOS (versión 7.7.2 en adelante) |
Este componente es un contenedor que funciona como padre para incluir otros componentes, que nombramos como componentes hijos. El Flex Container facilita el posicionamiento y la alineación de los distintos componentes incluidos porque soporta el cambio de tamaño automático en relación a sus componentes hijos - esto significa que que su tamaño puede adaptarse de acuerdo con el tamaño de sus hijos - y te permite distribuir el espacio remanente entre ellos.
Por ejemplo, la pantalla siguiente se refiere a un error de transacción. Esta pantalla contiene un componente flex container padre y un componente image, uno text label y uno button, con sus respectivos flex containers secundarios.
Si, a petición del cliente, se aumenta el tamaño de letra del text label, el flex container se adaptará para que el texto se muestre correctamente, como se muestra a continuación.
En este caso, es necesario que la altura (H) del flex container padre y del flex container secundario que incluye el text label se establezca en tamaño automático, lo que significa que no se define ninguna altura. Esto permitirá que el flex container padre se adapte al tamaño de sus hijos y haga que los componentes hijos se distribuyan en la pantalla. Además, el tamaño del flex container secundario se adaptará según el tamaño del componente text label, definido por su tamaño de fuente.
Importante
Por defecto, el primer componente raíz en el canvas es un panel, que actúa como contenedor para cualquier componente dentro de él y cubre toda la pantalla. El panel te permite utilizar los atributos Scroll y Move over key, aplicables a toda la pantalla. Como mejor práctica, debes agregar un flex container al panel y luego construir el resto de la pantalla.
Diseños de pantalla utilizando componentes flex container
Como primer paso durante el proceso de construcción, los diseñadores del equipo identifican la estructura y las funcionalidades de la app según los requisitos del proyecto. Esto resulta en la definición del flujo de usuarios de la app, lo que permite configurar la navegación en la app. Basándose en eso, los diseñadores definen los diseños de pantalla, que luego se crean en Studio.
Como mejor práctica, debes establecer layouts para las pantallas de tu app. Al establecer un layout, puedes definir la organización de las diferentes secciones y componentes dentro de cada pantalla.
Para empezar, debes agregar un contenedor flex container al panel por defecto del canvas. Luego, debes agregar componentes flex container adicionales por cada sección de la pantalla que estás diseñando y que incluirán los diferentes componentes. Esto significa que cada pantalla tendrá un contenedor flex container original único y contenedores flex container secundarios adicionales, que dependen de las secciones de la pantalla que estés diseñando.
Sugerencia
La definición de los layouts depende de los requisitos del proyecto y de la información que contendrá cada pantalla.
Por ejemplo, un cliente te solicita crear una pantalla de inicio para tu app. Después de analizar los requisitos, determinas que el diseño de la pantalla contendrá cuatro secciones: una barra superior, una sección de contenido con dos subsecciones dentro de ella y una barra inferior de navegación (ver imagen a continuación). Además del contenedor flex container principal, cada sección se diseñará basándose en un contenedor flex container secundario.
Cómo usar un componente Flex Container en tu app
Esta sección incluye un caso de uso que explica cómo debes usar y configurar un componente flex container para cumplir con una solicitud realizada por GoldBank, tu cliente.
Importante
Para cada proyecto, el diseñador del equipo define los layouts de las pantallas en función de los requisitos del cliente y los lineamientos universales del diseño digital. Al definir dichos layouts, el diseñador establece las configuraciones de los atributos de espaciado, posición y tamaño. Dicha información es utilizada por los implementadores al configurar las pantallas en Studio, como se describe en el siguiente caso de uso.
GoldBank te pide que rediseñes la sección My Accounts de la app. Esta solicitud implica agregar una nueva pantalla y una lista con las cuatro cuentas que posee el usuario de la app. El fondo de la pantalla debe ser el mismo en toda la app, un tono específico de gris (##f2f2f2), pero cada cuenta debe mostrarse sobre un fondo blanco y tener esquinas redondeadas. Cada cuenta debe mostrar el nombre, número y su respectivo saldo. La lista de cuentas debe aparecer en pantalla cuando el usuario de la app acceda a My Accounts, y el tamaño de la pantalla donde se muestran las cuentas debe ampliarse cuando se carga la pantalla. Consulta las instrucciones a continuación para obtener más información sobre cómo configurar la pantalla de acuerdo con los requisitos del cliente.
Una vez que obtengas los requisitos del proyecto, puedes comenzar a trabajar en el proceso de construcción de pantallas.
Haz clic en + New screen para abrir el editor de pantallas.
Dirígete a la app y, en el Overview, haz clic en Screens.
En el editor de pantallas, dirígete al panel izquierdo y luego a la pestaña Info. Agrega un nombre para identificar la pantalla, por ejemplo: My accounts, y una descripción que incluya información sobre el propósito de la pantalla, por ejemplo: Screen that includes the accounts owned by the app user, that can be deleted as necessary. Además, agrega la secuencia. También puedes añadir etiquetas para encontrar fácilmente la pantalla en la lista de pantallas en el futuro, por ejemplo: accounts.
Haz clic en Save (ícono de disquete) para guardar los cambios de la pestaña Info antes de editar la pantalla. Se abre el modal Commit message, donde debes incluir una descripción que informe por qué se ha creado o editado la pantalla para la rama previamente seleccionada. También puedes agregar el ticket de Jira donde se definió la solicitud, si corresponde. A continuación, haz clic en Save and continue.
Como mejor práctica, debes agregar el flex container padre al canvas y configurarlo. Dentro de este flex container, agregarás componentes flex container secundarios que representarán las secciones dentro de la pantalla.
Dirígete al panel izquierdo y luego, a la pestaña Components. Escribe Flex Container en la barra de búsqueda o encuéntralo en la lista. A continuación, arrástralo y suéltalo en el canvas para usarlo como flex container principal para contener cualquier otro flex container dentro de él.
Dirígete a la sección de posición y alineamiento. Elimina los valores de los atributos X e Y. En los atributos W y H, introduce 100 y selecciona % (porcentaje) como unidad de medida, de modo que el componente flex container cubra toda la pantalla (tanto en longitud como en anchura).
Dirígete a la sección Spacing. En el área de Padding, escribe 40 en el relleno superior, 15 en el relleno inferior y 15 en los rellenos izquierdo y derecho. Deja seleccionada la unidad de medida px.
Como se estableció en el diseño del proyecto, dirígete a la sección Background e introduce un color para el fondo del flex container. En este caso, introduce #f2f2f2, que es el código hexadecimal que representa el tono de gris definido para la app según los requisitos del cliente.
Sugerencia
Como mejor práctica, ingresa el código hexadecimal para el color requerido en lugar de seleccionar un color del selector de color.
Dirígete a la sección Size & Position. En el campo Position type, selecciona Relative.
Sugerencia
Como mejor práctica, el flex container padre, los flex container secundarios y los componentes hijos deben tener el tipo de posición definido en Relative. Con el posicionamiento establecido en Relative, los componentes secundarios se alinean uno tras otro según el diseño del flex container principal (ya sea en columnas o filas). Además, si se modifica el tamaño de un componente hijo, el posicionamiento relativo permitirá que todos los componentes hijos se reorganizen automáticamente, para evitar la superposición entre ellos.
Dirígete a la sección Layout. En la subsección Direction, selecciona Column para que los componentes dentro del flex container se extiendan desde la parte superior a la inferior del contenedor. En la subsección Align, selecciona stretch, de modo que los componentes dentro del flex container estén alineados y se extiendan por todo el espacio del contenedor. En la subsección Justify, selecciona start, para que los componentes dentro del flex container se ubiquen en la parte superior del contenedor. En la sección Children, seleccionaWrap para que, si los componentes dentro del flex container exceden su ancho máximo, se coloquen debajo del resto de los componentes. Luego, en las opciones de envoltorio que aparecen, selecciona stretch.
Dirígete a la pestaña Actions. En la sección Animation, debes configurar los valores iniciales del componente flex container y luego la animación en sí.
En los campos Apha y Scale introduce 0, para establecer la opacidad inicial y el tamaño del flex container antes de que se ejecute la animación, respectivamente.
Configura el campo On Load para que los componentes que representan las cuentas aparezcan cuando se cargue la pantalla y se amplíe el tamaño del contenedor flexible, según la solicitud del cliente. Haz clic en el icono vertical de tres puntos a la derecha. Una vez abierto el editor de animaciones, introduce un nombre para identificar la animación, por ejemplo: On load animation to show accounts. Continúa la configuración como se especifica a continuación.
Sugerencia
Si el valor de Scale configurado en la sección Animaciones es 0, la escala del componente será el tamaño configurado en los campos H y W de la pestaña Design.
Haz clic en add step para añadir un primer paso a la animación. Para agregar una animación para que el flex container cambie su tamaño, solo tienes que establecer un paso, que se aplicará a la escala del componente. Dirígete a la sección Basic a la derecha y configura los campos como se especifica en la tabla siguiente.
Importante
La sección Initial Values tiene todos los campos preconfigurados, según los valores establecidos en la X (Abs. Left), Y (Abs. Top) y R (Rotation) en la pestaña Design.
Nombre
Escribe scale para que el nombre muestre que este paso establecerá una animación en el tamaño del componente.
Delay
Introduce 1 para que la animación comience un segundo después de que se cargue la pantalla.
Duration
Introduce1 para que la animación dure 1 segundo.
Repeat
No se requiere configuración porque este atributo aún no se ha implementado.
Curve
No se requiere configuración porque este atributo aún no se ha implementado.
Damping Ratio
Deja el valor predeterminado (1) para que la animación no tenga oscilación.
Position Type
Selecciona Relative para que el componente cambie su posición sumando o restando los valores de los parámetros Abs Left y Abs Top (sección Final Values ) a los de los valores de posición iniciales.
Dirígete a la sección Final Values. Dado que el único propósito de este paso es mostrar un cambio en la escala del contenedor flexible, solo necesitas configurar el campo Scale. En el campo Scale, ingresa 1, considerando que: el valor inicial será 0, como se configuró previamente, y 1 representa que el valor final del tamaño del contenedor flexible será el 100%, es decir, el tamaño especificado en los campos W y H establecidos en la pestaña Design. Haz clic en Save para guardar los cambios.
Configura la barra superior de la pantalla (sección de encabezado), comenzando con un flex container secundario.
Dirígete al panel izquierdo y agrega un segundo flex container, que incluirá el nombre de la página de la app y el acceso al perfil del usuario de la app. Cambia el nombre a FlexHeader.
Dirígete a la sección de posición y alineamiento. Introduce 100 en el atributo width (W) e introduce 5 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Column. En la subsección Align, seleccionacenter. En la subsección Justify, selecciona center. En la sección Children, selecciona Wrap y luego Start.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Configura la etiqueta My accounts que aparece en la sección superior de la pantalla.
Dirígete al panel izquierdo y agrega un flex container, que incluirá el nombre de la página de la app y el acceso al perfil del usuario de la app. Cambia el nombre a Flex-data.
Dirígete a la sección de posición y alineación. Introduce 80 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, seleccionastretch. En la subsección Justify, selecciona Start. En la sección Children, selecciona Wrap y luego Start.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Ve al panel izquierdo. Escribe Text label y arrastra y suelta el componente dentro del flex container en el canvas.
Sugerencia
Dirígete a la pestaña Treeview para asegurarte que los componentes hijos se colocan correctamente dentro de cada flex container.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Basic. En el campo CSS Class, selecciona SubtitleRegular. Luego, dirígete al campo Value e ingresa a My accounts.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Dirígete a la sección Text. En el atributo Font Size introduce 14px. En el campo Font Family selecciona InterBold. En la sección Font Weight selecciona bold y en el campo Color introduce el código hexadecimal #505050.
Configura el icono que representa el perfil del usuario de la app que aparece en la sección superior de la pantalla.
Dirígete al panel izquierdo y agrega un flex container, que incluirá el nombre de la página de la app y el acceso al perfil del usuario de la app. Cambia el nombre a Flex-data.
Dirígete a la sección de posición y alineación. Introduce 20 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, selecciona stretch. En la subsección Justify, selecciona Start. En la sección Children, selecciona Don't Wrap.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Dirígete al panel izquierdo. Escribe Icon y arrastra y suelta el componente dentro del flex container en el canvas.
Sugerencia
Dirígete a la pestaña Treeview para asegurarte que los componentes hijos se colocan correctamente dentro de cada flex container.
Dirígete a la sección de posición y alineación. Introduce 60 en el atributo width (W) e introduce 60 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Basic y luego al atributo Icon. Haz clic en el ícono de lupa e introduce arrowselect en la barra de búsqueda y haz clic en el ícono de lupa. Haz clic en la primera imagen que aparece.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Dirígete a la sección Text. En el campo Color introduce el código hexadecimal #505050.
Establece el diseño de la sección de pantalla que muestra la información de las tarjetas de las cuentas.
Dirígete al panel izquierdo y arrastra y suelta un flex container. Este será el contenedor que representa la sección de contenido de la pantalla. Dentro de ella, agrega los componentes flex container que representarán cada tarjeta de cuenta. Cambia el nombre a FlexContent.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 90 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Column. En la subsección Align, seleccionacenter. En la subsección Justify, selecciona center. En la sección Children, selecciona Wrap y luego Start.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Configura el flex container que representa la cuenta y los flex containers restantes dentro de ella, que representan las diferentes secciones dentro de la tarjeta de cuenta. Se dividirá en dos componentes flex container secundarios principales: uno con el área del ícono de la cuenta, y otra área con los datos de la cuenta (nombre, número y saldo), y el ícono para acceder a los detalles de la cuenta.
Sugerencia
Después de configurar este flex container y los componentes dentro de él, y por lo tanto, establecer la primera cuenta, tienes que duplicarlo tres veces más para las tres cuentas restantes. A continuación, realiza los cambios pertinentes en relación con los datos invocados por cada cuenta.
Dirígete al panel izquierdo y arrastra y suelta un flex container. Este será el contenedor que representa la sección de contenido de la pantalla. Cambia el nombre a FlexCard1.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 14 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Spacing. En el área de Margin (margen), introduce 12 en el margen superior. Deja seleccionada la unidad de medida px.
En la sección Border, elimina el número 1 que aparece de forma predeterminada.
En la sección Radius, introduce 8 en el campo Radius y selecciona px como la unidad de medida.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Column. En la subsección Align, seleccionacenter. En la subsección Justify, selecciona center. En la sección Children, selecciona Wrap y luego Start.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Configura el icono que representa la cuenta.
Dirígete al panel izquierdo y agrega un flex container, que incluirá el nombre de la página de la app y el acceso al perfil del usuario de la app. Cambia el nombre a Flex-data.
Dirígete a la sección de posición y alineación. Introduce 20 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Background. Deja seleccionada la opción Flat (botón de opción) para que el fondo tenga un solo color. Abre el selector de color e introduce el código hexadecimal #c2c1c2 en el campo Hexa.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, selecciona stretch. En la subsección Justify, selecciona Start. En la sección Children, selecciona Don't Wrap.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Escribe Icon y arrastra y suelta el componente de icono dentro del contenedor flexible en el canvas.
Dirígete a la sección de posición y alineación. Introduce 30 en el atributo width (W) e introduce 30 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Basic y luego al atributo Icon. Haz clic en el ícono de lupa e introduce arrowselect en la barra de búsqueda y haz clic en el ícono de lupa. Haz clic en la primera imagen que aparece.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Dirígete a la sección Text. En el campo Color introduce el código hexadecimal #505050.
Configura la sección que contiene el nombre, número y saldo de la cuenta, y el icono que representa el acceso a los detalles de la cuenta.
Dirígete al panel izquierdo y agrega un flex container, que incluirá los detalles de la cuenta.
En la sección posición: ingresa 80 en el campo ancho (W) y selecciona la unidad de medida %; ingresa 100 en el campo alto (H) y selecciona % como unidad de medida.
Dirígete a la sección Spacing. En el área de relleno, introduce 5 en los rellenos superior e izquierdo. Deja seleccionada la unidad de medida px.
En la sección Border, elimina el número 1 que aparece de forma predeterminada.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, seleccionastretch. En la subsección Justify, selecciona Start. En la sección Children, selecciona Wrap y luego Start.
En la sección Size & Position, dirígete al campo Position Type y selecciona Relative.
Dirígete al panel izquierdo y agrega un flex container al contenedor Flex-data2. Este componente contendrá los detalles de la cuenta de acceso. Cambia el nombre a FlexBalance.
Dirígete a la sección de posición y alineación. Introduce 85 en el atributo width (W) e introduce 50 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Spacing. En el área de relleno, introduce 5 en los rellenos superior e izquierdo. Deja seleccionada la unidad de medida px.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, selecciona End. En la subsección Justify, selecciona Start. En la sección Children, selecciona Don't Wrap.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Ve al panel izquierdo. Escribe Text label y arrastra y suelta el componente dentro del flex container en el canvas.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Basic. En el campo CSS Class selecciona SubtitleRegular. En el campo Value, introduce la expresión para invocar la información del nombre de la cuenta o introduce la información que deseas mostrar. En este caso: CA USD, para representar una cuenta corriente en dólares estadounidenses.
Dirígete a la sección Size & Position. En el campo Position Type, selecciona Relative.
Dirígete a la sección Text. En el atributo Font Size introduce 10px. En el campo Font Family selecciona InterBold. En la sección Font Weight selecciona bold y en el campo Color introduce el código hexadecimal #505050.
Dirígete al panel izquierdo y agrega un flex container al contenedor Flex-data2. Este componente contendrá los detalles de la cuenta de acceso. Cambia el nombre a FlexIcon.
Dirígete a la sección de posición y alineación. Introduce 15 en el atributo width (W) e introduce 50 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Spacing. En el área de relleno, introduce 5 en el relleno inferior. Deja seleccionada la unidad de medida px.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, selecciona End. En la subsección Justify, selecciona Start. En la sección Children, selecciona Don't Wrap.
Dirígete a la sección Size & Position. En el campo Position Type, selecciona Relative.
Dirígete al panel izquierdo. Escribe Icon y arrastra y suelta el componente dentro del flex container en el canvas.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Basic y luego al atributo Icon. Haz clic en el ícono de lupa e introduce arrowselect en la barra de búsqueda y haz clic en el ícono de lupa. Haz clic en la primera imagen que aparece.
Dirígete a la sección Size & Position. En el campo Position Type, selecciona Relative.
Dirígete a la sección Text. En el campo Color introduce el código hexadecimal #666666.
Nota
Si no puedes visualizar el ícono en el canvas, usa la opción QuickRun para ver cómo se verá en la app.
Dirígete al panel izquierdo y agrega un flex container al contenedor Flex-data2. Este componente contendrá los datos del número de cuenta. Cambia el nombre a FlexNumber.
Dirígete a la sección de posición y alineación. Introduce 50 en el atributo width (W) e introduce 50 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Spacing. En el área de relleno, introduce 5 en los rellenos superior e izquierdo. Deja seleccionada la unidad de medida px.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, selecciona stretch. En la subsección Justify, selecciona Start. En la sección Children, selecciona Don't Wrap.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Ve al panel izquierdo. Escribe Text label y arrastra y suelta el componente dentro del flex container en el canvas.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Basic. En el campo CSS Class selecciona Caption. En el campo Value, introduce la expresión para invocar la información del número de cuenta.
Nota
La información mostrada en esta sección es solo para fines de descripción.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Dirígete a la sección Text. En el atributo Font Size introduce 9px. En el campo Font Family selecciona InterMedium. En la sección Font Weight selecciona bold y en el campo Color introduce el código hexadecimal #195ADA.
Dirígete al panel izquierdo y agrega un flex container al contenedor Flex-data2. Este componente contendrá los detalles de la cuenta de acceso. Cambia el nombre a FlexBalance.
Dirígete a la sección de posición y alineación. Introduce 50 en el atributo width (W) e introduce 50 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Spacing. En el área de relleno, introduce 5 en los rellenos superior e izquierdo. Deja seleccionada la unidad de medida px.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, selecciona stretch. En la subsección Justify, selecciona Start. En la sección Children, selecciona Don't Wrap.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Ve al panel izquierdo. Escribe Text label y arrastra y suelta el componente dentro del flex container en el canvas.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Basic. En el campo CSS Class selecciona Label. En el campo Value, introduce la expresión para invocar la información del número de cuenta.
Nota
La información mostrada en esta sección es solo para fines de descripción.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Dirígete a la sección Margins & Alignment y selecciona alineación Right.
Dirígete a la sección Text. En el atributo Font Size introduce 8px. En el campo Font Family selecciona InterMedium. En la sección Font Weight selecciona bold y en el campo Color introduce el código hexadecimal #202020.
Flex container secundarios
Los flex container secundarios son contenedores flexibles añadidos dentro de un flex container padre que, debido a que es secundario, tienen atributos adicionales disponibles para su configuración en las pestañas Design y Advanced del panel derecho. Consulta la tabla a continuación para obtener más información sobre los atributos adicionales.
Importante
Los atributos adicionales mencionados solo aparecen para la configuración de flex containers secundarios o hijos.
Especificaciones de atributos
Consulta la sección a continuación para obtener más información sobre todos los atributos del panel derecho que aparecen para la configuración cuando arrastras y sueltas un componente flex container en el canvas.
Importante
Esta sección es solo para fines informativos. Configura los atributos del componente según los requisitos de tu proyecto.
Configuración del flex container en el panel derecho
Attributes
Pestaña Design.
Nota
En el caso del componente flex container, los atributos de alineación no se pueden configurar.
En primer lugar, debes cambiar el nombre del flex container para representar su posición dentro del layout de la pantalla. Por ejemplo, si se trata de un flex container padre, el nombre puede ser FlxParent.
Luego, puedes configurar los atributos de posición, que afectan a la posición de todos los componentes hijos dentro de él, como se especifica en la tabla siguiente.
X | Posición del flex container en el canvas con respecto al eje X. Introduce un número en el campo y, luego, selecciona la unidad de medida % o px. SugerenciaEn el caso de un flex container padre, el atributo X debe establecerse en 0. |
Y | Posición del flex container en el canvas con respecto al eje X. Introduce un número en el campo y, luego, selecciona la unidad de medida % o px. SugerenciaEn el caso de un flex container padre, el atributo Y debe establecerse en 0. |
R | Ángulo con el eje vertical en el que se ubica el componente flex container. Este atributo no debe configurarse para el componente flex container. |
W | Ancho del componente con respecto al tamaño de la pantalla. |
H | Altura del componente con respecto al tamaño de la pantalla. |
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. SugerenciaComo mejor práctica, si un color ya está definido, el campo de opacidad no debe modificarse. |
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.
Direction | Dirección de los componentes dentro del componente flex container. Haz clic en Row para que los componentes hijos 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 componente flex container con respecto al espacio del contenedor. Si seleccionaste 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 seleccionaste 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 container 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 container. 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, o 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 ( |
