Introducción
En el editor del App Designer puede configurar el layout de su app. Hay varias maneras de configurar el layout de su app, puede elegir el tipo de contenedor para el contenedor principal de su app. Además, puede definir el número de columnas y filas dentro de los contenedores principales de su app, con el fin de lograr diseños más versátiles. Esto le da la capacidad de usar las columnas y filas configuradas para distribuir sus Controles de una manera única.
Tipos de contenedores
Contenido
Su app tiene una sección principal llamada Contenido, y dentro de esta sección estarán contenidas todas las filas y columnas con sus Controles.
Para hacer esto, haga clic en la sección Contenido, seleccione la opción de Diseño y bajo la etiqueta de Preajustes puede elegir qué tipo de layout que desea para su app.
Usted puede configurar cómo se divide el contenedor Contenido con las siguientes opciones:
•Página web: el contenedor Sección de su app no estará dividido y tendrá un ancho que ocupa el 100% de su app. Para más información, consulte el artículo sobre el layout de la página web.
•Móvil: el contenedor Sección se dividirá en dos contenedores. Para más información, consulte el artículo sobre el layout para móviles.
Diseño
Usted puede configurar el tipo de ancho para el contenedor Contenido. Para hacer esto, haga clic en la sección Contenido, seleccione la opción Diseño y bajo la etiqueta Ancho puede elegir qué tipo de ancho desea para su app.
Estas son las opciones disponibles para el ancho de su app:
•Completo: el contenedor Contenido no tendrá relleno, por lo que los contenedores Sección ocuparán el ancho completo del contenedor Contenido.
•Enmarcado: el contenedor Contenido tendrá relleno, por lo que los contenedores Sección no ocuparán el ancho completo del contenedor Contenido. Puede elegir la alineación horizontal con esta opción seleccionada.
Sección
Este es el contenedor que se encuentra dentro del contenedor Contenido. El contenedor Sección tiene los contenedores Fila, y el número de contenedores Sección depende del tipo de contenedor Contenido.
•Tendrá 1 contenedor Sección si seleccionó el diseño Página web para el contenedor Contenido de su app.
•Tendrá 2 contenedores Sección si seleccionó el diseño Móvil para el contenedor Contenido de su app.
Fila
Este es el contenedor que se encuentra dentro del contenedor Sección. El contenedor Fila tiene los contenedores Columna, la cantidad de contenedores Columna depende del tipo de layout de su contenedor Contenido, y usted puede agregar o eliminar la cantidad de contenedores Fila.
Columna
Este es el contenedor que se encuentra dentro del contenedor Fila. El contenedor Columna tiene los Controles de su app.
Opciones de diseño
Los contenedores Sección, Fila y Columna tienen las mismas configuraciones de Diseño. Podrá configurar las siguientes opciones en la pestaña de Diseño de cada uno de estos contenedores.
•Relleno: seleccione el tipo de relleno para el contenido dentro de esta sección. Las opciones que puede seleccionar son: Sin espacio, Compacto, Normal, Amplio.
•Espacio vertical: seleccione el tipo de espacio entre cada fila de la sección. Las opciones que puede seleccionar son: Sin espacio, Compacto, Normal, Amplio.
•Tamaño del borde: seleccione el grosor para el borde de la sección. Puede definir un valor entre 0 y 5 para el tamaño del borde.
•Radio de borde: defina un valor, sea en pixeles (px) o porcentaje (%), para el radio de borde de la sección. También puede definir un valor individual para cada esquina de la sección.
•Sombra de caja: opción que le permite habilitar una sombra de caja para la sección. Puede configurar el color, la dirección, el difuminado y la extensión de la sombra.
•Color de fondo: color de fondo de la sección. Usted puede seleccionar un color predeterminado, o uno del selector de color al escoger el primer color de la fila, ubicado debajo de la etiqueta Color de fondo.
•Color de borde: color del borde de la sección. Usted puede seleccionar un color predeterminado, o uno del selector de color al escoger el primer color de la fila, ubicado debajo de la etiqueta Color de borde.
Opciones únicas de diseño Fila
La sección Fila tiene las mismas opciones de Diseño mencionadas arriba con la adición de la siguientes opciones:
•Ajustar altura: opción que le permite al contenido de la fila ajustar su altura para encajar en la sección.
•Alineación vertical: alineación vertical del contenido de la sección.
Opciones únicas de diseño Columna
La sección Columna tiene las mismas opciones de Diseño mencionadas arriba con la adición de la siguientes opciones:
•Alineación horizontal: alineación horizontal del contenido adentro de la sección.
Last Updated 6/4/2024 8:30:41 PM