# Apariencia En el apartado ***Appearance*** puedes configurar diversas opciones vinculadas a la visualización de los campos en el formulario. Aunque este tipo de propiedades se centra en elecciones de estilo o formato que no influyen de modo directo en la funcionalidad de los componentes, es importante tener en cuenta que pueden afectar notablemente su eficacia: un diseño claro y amigable para el usuario favorecerá su correcta administración mientras que un diseño poco intuitivo puede dificultarla. Veamos cuáles son estas propiedades para los distintos tipos de elementos de formulario. Recuerda que puedes activar el modo ***Preview*** mientras trabajas para revisar en tiempo real cómo impactan las distintas elecciones que realices.

Apartado **Appearance** y ubicación del botón de **Preview**.

## Columnas y elementos estáticos Tanto las columnas como los elementos estáticos ***Text*** e ***Image*** poseen propiedades específicas que definen su posicionamiento en pantalla. La propiedad ***Vertical align*** es común a todos ellos y se refiere a la ubicación que los componentes adoptan respecto al margen superior e inferior de la sección o columna que los contiene. Esta propiedad puede configurarse como ***Top*** (se alinea en la parte superior), ***Center*** (se alinea en el centro) o ***Bottom*** (alineado en la parte inferior).

Opciones de la propiedad **Vertical align**

Otra propiedad que afecta solamente a las columnas es ***Spacing***, que se refiere al espacio vertical existente entre los elementos de una misma columna. Cuanto mayor sea este número, más separación existirá entre los campos. La propiedad ***Align*** que se encuentra tanto en los campos de texto como de imagen, funciona de un modo similar pero definiendo el posicionamiento horizontal del contenido. Este puede establecerse en ***Left***, ***Center*** o ***Right***, que indican alineación a la izquierda, al medio o a la derecha respectivamente.

El campo ***Text*** ofrece una mayor riqueza de opciones, contando con las siguientes propiedades:

Propiedad	Función
Margin	Con valores desde 0 hasta 10, permite escoger el margen de espacio libre alrededor del texto. Un valor más bajo lo posicionará con mayor proximidad a los demás componentes mientras que un valor más alto aumentará la separación.
Weight	Permite establecer el peso de la tipografía en Light (ligera), Regular (normal) o Bold (negrita).
Font style	Permite seleccionar el estilo de itálica o normal para el texto.
Text variant	Ofrece una serie de variantes preconfiguradas con distintos niveles para encabezados, subtítulos, cuerpo de texto y otras opciones.

## Campos de entrada Aunque los campos de entada presentan rangos de opciones más variados dependiendo de su funcionalidad, en la mayoría de ellos encontrarás las siguientes propiedades de apariencia: ### Mask Esta propiedad define una estructura para dato solicitado, determinando sus valores posibles. Para utilizar esta propiedad, deberás conocer ciertos parámetros, que definen el tipo de caracteres aceptados en cada espacio de la cadena: * El caracter "a" representa cualquier letra, es decir que cuando se incluye en la máscara, el usuario solo podrá ingresar un caracter alfabético en ese espacio. * El caracter '0' representa cualquier número. Al incluirse en la máscara, solo admitirá como válidos para ese espacio los valores desde el 0 al 9.

Ejemplo de una máscara que admite cuatro caracteres alfabéticos y cuatro caracteres numéricos

* Si solo se considerará como válida una letra o número particular en ese espacio de la cadena, es necesario ingresar el caracter correspondiente en la máscara. * Si un caracter de la cadena debe ser específicamente "a" o "0", dado que estos números tienen también una función como letra o número genérica, se debe anteponer la barra "\\" para que solo se acepte ese caracter puntual. * Pueden agregarse otros caracteres como puntos o guiones a la máscara para que los datos ingreados adopten este formato. {% embed url="" %} Ejemplo de la configuración de Mask con distintos caracteres {% endembed %} ### Placeholder Establece un texto predeterminado que se muestra al usuario en ese campo, el cual puede utilizarse para brindar ejemplos o sugerencias para completarlo.

Incorporación de un texto de sugerencia con uso de **Placeholder**

### Prefix Añade una expresión como prefijo a los datos que se ingresen en el campo, por ejemplo, la característica antes de un número de teléfono.

Establecimiento de un prefijo para un número telefónico

### Multiline Puede escogerse el valor ***True*** si se desea que el campo posea múltiples líneas (para un área de texto más extensa) o ***False***, si se muestra en un único renglón.

Generación de espacio adicional definiendo el valor **True** para la propiedad **Multiline**

Ten presente que algunos tipos de campos como ***Date*** o ***Attachment*** tendrán menos cantidad de propiedades o bien no mostrarán este apartado, ya que tienen un formato preestablecido que no admite variaciones. Otros campos, como ***Options*** o ***Boolean***, tendrán propiedades únicas para los componentes de su tipo, tal como veremos más adelante. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.rpaconnect.io/diseno-de-formularios/asignacion-de-propiedades/apariencia.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.