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 contenedores y opciones de estilo para cada uno de los controles

Coloca los controles

Se puede crear fácilmente un diseño de página personalizado con el control Diseño de contenedor.

El posicionamiento de nuestros controles dentro de una página o contenedor se puede lograr utilizando la función Alineación y diseño.

Los controles de la página y el contenedor pueden dictar la posición de los controles con los atributos de dirección (vertical/horizontal) y alineación en la sección de diseño. Por defecto, los controles se ajustan a una línea. Si se establece la propiedad "Permitir ajustar", los controles se ajustan en varias líneas si es necesario.

Cuando está habilitada, la propiedad Permitir ajustar se aplica si los controles dentro del contenedor no caben en una línea.

Los controles dentro de los contenedores pueden anular la alineación principal utilizando su propia opción de alineación. Para volver a la alineación principal, activa los iconos de alineación seleccionados para desactivar la alineación específica.

Si deseas que un grupo de controles tenga un posicionamiento específico, colócalos dentro de un contenedor y configura el diseño y la alineación del mismo.

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 están configurados en Automático, el tamaño del botón aumenta o disminuye en función del texto del botón.

También se pueden establecer una altura y una anchura específicas. La anchura / altura mínima y la anchura / altura máximas están disponibles en Más (...) en la sección de tamaños.

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).

Elegir unidades de medida

Las unidades de medida pueden elegirse seleccionándolas en el desplegable de unidades o escribiendo las unidades directamente con el teclado y pulsando Intro. Por ejemplo, se puede establecer un ancho del 50 % simplemente escribiendo 50 %.

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

Personalizar la fuente

Puedes cambiar el aspecto del texto en tu aplicación ajustando los atributos familia de fuentes, tamaño de fuente, color de fuente y estilo de fuente (negrita, cursiva, subrayado).

Consejo:

Puedes cambiar entre los colores RGB, HEX y HSL haciendo clic en las flechas junto al valor del color.

Trabajar con fronteras

La sección de bordes tiene tres propiedades:

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

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

Botones circulares con radio de esquina

Se pueden hacer botones circulares modificando la propiedad Radio de la esquina.

Espaciar los controles

Los controles y contenedores pueden espaciarse utilizando Márgenes y rellenos.

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

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

Los controles de contenedor tienen márgenes y rellenos, mientras que en la mayoría de los otros controles solo está disponible la sección de margen.

Tanto la sección de margen como la de relleno tienen la capacidad de desvincular los valores superiores/inferiores e izquierdos/derecha para establecerlos de forma independiente.

Cambiar el color de fondo

Puedes cambiar el color de fondo de tus controles con uno de los tres modelos de color:

• RGB
• HEX

• HSL

  Para ello, haz clic en las flechas situadas junto a los valores de color.