Diseño y estilo

App Studio ofrece amplias opciones de personalización en términos de diseño de la aplicación utilizando sus diferentes controles de contenedor y opciones de estilo para cada uno de los controles.

Cómo colocar los controles

Puedes crear fácilmente un diseño de página personalizado utilizando el control Diseño de contenedor . De esta manera, puedes agrupar varios controles para tener un posicionamiento específico, mientras configuras el diseño y la alineación de un solo control (es decir, el contenedor).

Para personalizar la posición de los controles dentro de una página o un contenedor:

1. Selecciona la página o el contenedor donde se encuentra el control deseado.

2. En el panel Estilo, selecciona el Diseño (Vertical, Horizontal) y la alineación de los controles (Izquierda, Centro, Derecha, Estiramiento, Superior, Medio, Inferior, Distribuir).

   Nota:

   De forma predeterminada, los controles se ajustan a una línea y heredan la alineación del contenedor principal.

3. (Opcional) Para el control deseado, anula la alineación heredada seleccionando una de las opciones disponibles. Para volver a la alineación del contenedor, desmarca la selección de cualquier alineación anulada.
4. (Opcional) Para el contenedor o la página deseados, selecciona la opción Permitir ajuste para ajustar los controles a varias líneas.

Cambiar el tamaño de los controles

Los controles tienen un tamaño automático por defecto. Permite automáticamente que el control tome el tamaño del contenido dentro de él. Por ejemplo, si el ancho y la altura de un control de botón se establecen en auto, el tamaño del botón aumenta o disminuye en función del texto del botón.

También se puede establecer la altura y el ancho específicos. Ancho/altura mínimo y Ancho/altura máximo están disponibles bajo el icono de tres puntos (...) en la sección Tamaño del panel Estilo.

Las unidades de medida son %, px (píxeles) y em(relativo al tamaño de la fuente del elemento). Por ejemplo, 3em significa 3 veces el tamaño de la fuente actual.

Para seleccionar las unidades de medida, utiliza los menús desplegables de los campos de tamaño o escribe la unidad. Por ejemplo, para establecer un ancho de 100 píxeles, escribe 100px en el campo Ancho .

Nota:

Si no se proporcionan unidades de medida, el sistema utiliza por defecto píxeles (px).

Cómo personalizar la fuente

Para cambiar la forma en que aparece el texto en tu aplicación, ajusta los atributos en la sección Fuente , como la familia de fuentes, el tamaño, el color o el estilo.

Puedes cambiar entre los formatos de color RGB, HEX y HSL haciendo clic en las flechas situadas junto al valor de color.

Trabajar con fronteras

Utiliza la propiedad Borde para crear un borde alrededor de tu control. Puedes definir el grosor y el radio del borde.

La sección Borde se puede encontrar en las propiedades de todos los controles de Contenedor, así como en ciertos controles de Entrada y Visualización. La sección Borde tiene tres propiedades:

• Grosor de borde
• Color del borde
• Radio de la esquina.

Los píxeles son la unidad de medida de estos atributos.

Espaciar los controles

Los controles y los contenedores se pueden espaciar utilizando los atributos de las secciones Margen y Relleno.

Los márgenes proporcionan un espacio alrededor de los controles.

Los rellenos proporcionan un espacio entre el control y el contenido dentro de él.

Para separar los valores Superior/Inferior e Izquierda/Derecha y establecerlos de forma independiente, haz clic en el botón Enlace situado a la derecha de la sección Margen/Relleno.

Nota:

Puedes establecer el margen y el relleno de los controles de Contenedor, mientras que para la mayoría de los controles solo puedes establecer el margen.

Cambiar el color de fondo

Puedes cambiar el color de fondo de tus controles utilizando uno de los tres formatos de color: RGB, Hex o HSL.

Para cambiar el color de fondo de un control, utiliza las flechas junto a los valores de color.