Text Input
El componente Text Input es un cuadro de texto que permite al usuario de la app introducir texto en determinadas condiciones. Para insertar un componente de Text Input en la pantalla, ve al panel izquierdo en el constructor visual. Recorre la lista de componentes para encontrar el componente Text Input o haz clic en la barra de búsqueda y escribe el nombre. A continuación, arrastra y suelta el componente en el canvas y configura sus atributos en el panel derecho. Consulta las siguientes secciones para obtener más información.Text Input
Importante
El componente Text Input puede utilizarse en apps web y móviles (tanto para dispositivos Android como iOS).
Atributos
Lee la sección a continuación para aprender acerca de los atributos del panel derecho que aparecen cuando arrastras y sueltas el componente en el canvas.
Importante
Esta sección tiene como objetivo brindar información adicional. Configura los atributos del componente de acuerdo con los requisitos de tu proyecto.
Design
Primero, debes modificar el nombre para representar su posición dentro de la pantalla. Por ejemplo, el nombre puede ser iptUsername.
Luego, puedes configurar los atributos de posición, tal como se especifica a continuación.
X | Posición del componente en el canvas con respecto al eje x. Introduce un número en el campo y, a continuación, seleccione la unidad de medida % o px. |
Y | Posición del componente en el canvas con respecto al eje x. Introduce un número en el campo y, a continuación, seleccione la unidad de medida % o px. |
R | Ángulo con el eje vertical en el que se sitúa el componente. |
W | Ancho del componente respecto del tamaño de la pantalla. |
H | Alto del componente respecto del tamaño de la pantalla. |
Atributos de margen | Espacio alrededor del borde de un componente. Introduzca un valor para cada una de las propiedades de margen: Margen superior, margen izquierdo, margen inferior y margen derecho. Para definir la unidad de medida, haz clic en la flecha del campo de la derecha y selecciona una opción del menú desplegable. |
Atributos de relleno | Espacio entre el borde del componente y el contenido del componente (valor). Introduce un valor para cada una de las propiedades de relleno: Padding Top, Padding Left, Padding Bottom and Padding Right. Puedes hacer clic en la flecha situada a la derecha de cada campo de relleno y seleccionar px o % en el menú desplegable. |
Position Type | Haz clic en la flecha y selecciona un tipo de posición en el menú desplegable. Consulta la tabla a continuación para saber más sobre las opciones disponibles.
|
Importante
El atributo Tab Index ha sido eliminado. Utiliza el atributo Accessibility Order.
En esta sección, puedes definir los ajustes del fondo del componente. Consulta la tabla a continuación para obtener más información.
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. |
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.
En esta sección, puedes definir el estilo de uno o varios bordes de tu componente.
Para fijar todos los bordes del componente, haz clic en el ícono de eslabón de cadena situado en el centro del cuadrado. La cadena aparece intacta y todos los bordes del cuadrado se vuelven azules.
Para configurar los atributos de los bordes individualmente, haz clic en el borde deseado del ícono cuadrado; el borde seleccionado se vuelve azul y el ícono de eslabón de cadena aparece roto. Recuerda configurar los atributos para cada borde que desees personalizar.
A continuación, debes establecer el color y la anchura del borde o bordes que desees configurar. Consulta la tabla siguiente para obtener más información.
Color | Border color. Para establecer el color del borde, 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. En el selector de color, introduce el código de color hexadecimal. |
Width | Border width. Escribe un número para establecer el ancho del borde. Para cambiar la unidad de medida, haz clic en la elipsis (tres puntos) y selecciona una opción en el menú desplegable. |
En esta sección, puedes configurar el radio para definir la redondez de las esquinas del componente.
Por defecto, todas las esquinas del componente aparecen seleccionadas. La cadena aparece intacta y los puntos que representan cada esquina del cuadrado se vuelven azules. Si utilizas esta opción, se aplicarán los mismos atributos a todas las esquinas.
Para configurar los atributos de las esquinas individualmente, haz clic en la esquina deseada del ícono cuadrado; el punto de la esquina seleccionada se vuelve azul. Recuerda configurar atributos para cada esquina que desees personalizar.
Para aumentar o disminuir el tamaño del radio de los bordes o de un borde específico, escribe el valor en el campo Radius. Para cambiar la unidad de medida, haz clic en la unidad de medida seleccionada (texto de color azul) y elige una opción del menú desplegable.
Importante
Los cambios realizados en esta sección no aparecerán en la app publicada.
State | Atributo que te permite simular la apariencia del componente en un estado específico. Los estados se definen en la sección Styles del tema aplicado a la app y define la apariencia del componente bajo circunstancias específicas - para aplicar el estilo del esado a un componente, debes establecer la lógica en el panel derecho, indicándole a la app que, bajo un determinado evento, el componente debe cambiar su estado por defecto. Selecciona una opción del menú desplegable: Active, Hover, Pressed o Disabled. Aprende más sobre cada opción:
|
Value | Atributo que simula el comportamiento del atributo Value en la sección Basic de la pestaña Design. Haz clic en el campo e ingresa un valor para verlo aplicado automáticamente en el componente. |
Background Image | Imagen aplicada al fondo del componente. Para establecer la imagen de fondo, haz clic en el campo y escribe el nombre de la imagen, o haz clic en el ícono de la lupa para abrir el selector de imágenes. En el selector de imágenes, selecciona una de la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. |
En esta sección puedes configurar los atributos básicos del componente. Consulta la tabla a continuación para obtener más información.
CSS Class | CSS o estilo invocado desde Style > Themes y aplicado al componente. Haz clic en el campo y selecciona un estilo en el menú desplegable. SugerenciaPuedes añadir más de un estilo. | ||||||
Charset | Conjunto de caracteres admitidos por el componente. Esta expresión define los caracteres que son válidos y que el usuario de la app puede introducir en el campo del componente. Para establecer el conjunto de caracteres, haz clic en el campo e introduce el conjunto de caracteres o haz clic en el ícono de la lupa para abrir el selector de conjunto de caracteres. En el selector de conjuntos de caracteres, recorre la lista hasta encontrar la opción deseada y haz clic en Select. Las opciones disponibles son: Alphabetic, Alphabetic lower case, Alphabetic upper case, Alphanumeric y Numeric. | ||||||
Form Id | El ID del formulario al que pertenece la entrada de texto. Este atributo solo debe configurarse si el componente forma parte de un formulario. Para establecer el ID, haz clic en el campo e introduce el valor del ID. NotaPara configurar un formulario, todas las entradas de texto incluidas en él deben estar configuradas con el mismo ID del formulario, para que se ejecuten como un grupo. | ||||||
Submit Button | ID de componente del botón utilizado para enviar los datos introducidos en un formulario. Este atributo debe configurarse si la entrada de texto forma parte de un formulario. Para establecer el ID, haz clic en el campo e introduce el valor. | ||||||
Submit Button Text | Texto incluido en el botón para enviar. Este atributo debe configurarse con el texto definido en el componente Submit Button. Para establecer el texto, haz clic en el campo e introduce el valor. | ||||||
Enable Code Autofill | Atributo que incluye la función de autocompletado de código de seguridad, mediante la cual los códigos OTP recibidos por SMS aparecen como sugerencias automáticas de autocompletado. El código OTP se detectará como sugerencia si el texto incluye la palabra CODE (o su traducción) seguida de un espacio y el código OTP. Para configurar este atributo, haz clic en la flecha y elige uno de los dos valores del menú desplegable. Selecciona true para activar las sugerencias de autocompletado o selecciona false para que no se activen las sugerencias. ImportanteEste atributo solo está disponible para dispositivos con iOS 12 o de un modelo superior. Este atributo no responderá en dispositivos con versiones anteriores de iOS o en dispositivos con Android, aunque esté configurado. | ||||||
Required | Atributo que define si el usuario de la app debe introducir datos en el campo de entrada de texto. Puedes dejar el campo vacío o hacer clic en la flecha y seleccionar true para que la entrada de texto sea obligatoria. | ||||||
Display Name | Marcador de posición definido para el texto del componente mostrado en pantalla. Para establecer el texto, haz clic en el campo e introduce un valor. | ||||||
Input Msg | Mensaje que recibe el usuario de la app si los datos introducidos en el campo de entrada de texto no son válidos. Para establecer un mensaje, haz clic en el campo e introduce el texto. | ||||||
Regexp | Expresión regular que valida los datos introducidos por el usuario de la app en el campo del componente. Para establecer la expresión, haz clic en el campo y escríbela o haz clic en el ícono de la lupa para abrir el selector RegEx. En el selector, recorre la lista hasta encontrar la expresión deseada y haz clic en Select. Las opciones disponibles son: Any, Email, Float, X Characters y X to Y Characters. | ||||||
Target Var | Token en el que se almacenará el atributo Value del componente después de que el usuario de la app envíe los datos introducidos en un formulario. Para establecer un token, haz clic en el campo e introduce el número de token. NotaSolo se puede fijar un token. | ||||||
Auto dump | Token en el que se almacenará el atributo Value del componente cada vez que cambie dicho atributo. Para establecer un token, haz clic en el campo e introduce el número de token. NotaSolo se puede fijar un token. | ||||||
Value | Texto mostrado en el componente que informa al usuario de la app sobre los datos que debe introducir. Puedes añadir texto sin formato o una referencia a un parámetro o registro. También puedes agregar el valor al diccionario de traducciones o seleccionar una traducción existente si hay idiomas seleccionados en la configuración de la app.TraduccionesSettings SugerenciaSi no rellenas este campo, también puedes introducir el texto haciendo doble clic en el componente y escribiendo el texto deseado. Una vez que rellenes el campo Value, no podrás utilizar esta opción. | ||||||
Min Length | Número mínimo de caracteres que el usuario de la app puede introducir en el campo de entrada de texto. Para establecer la longitud mínima, haz clic en el campo y escribe un valor numérico. | ||||||
Max Length | Número máximo de caracteres que el usuario de la app puede introducir en el campo de entrada de texto. Para establecer la longitud máxima, haz clic en el campo y escribe un valor numérico. | ||||||
Enabled | Atributo que define si el componente puede ser editado por el usuario, es decir, que el usuario puede ingresar texto. Haz clic en la flecha y elige uno de los dos valores del menú desplegable. Selecciona true si se puede hacer clic en el componente o false si no se puede hacer clic. Los botones desactivados aparecerán en gris en la app. El valor por defecto es true. ImportanteEste atributo está disponible para apps web y móviles. | ||||||
Enabled Selectors | Atributo que permite activar o desactivar los selectores de fecha. Haz clic en la flecha y elige un valor en el menú desplegable. Selecciona true para activar los selectores de fecha o false para desactivarlos. El valor por defecto es false. | ||||||
Date Mask | Formato de máscara de fecha. Para establecer un formato de fecha, haz clic en la flecha y selecciona una de las opciones disponibles: DD-MM-AAAA, DD-MMM-AAAA, DD-MMMM-AAAA, DD/MM/AAAA, DD/MMM/AAAA o DD/MMMM/AAAA. El valor por defecto es DD/MM/AAAA. | ||||||
Active preview date | Atributo que activa la previsualización de la fecha introducida. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que se active la vista previa o false para que no se active. | ||||||
Date Language | Haz clic en la flecha y selecciona una de las opciones disponibles: English, French, Portuguese o Spanish. | ||||||
Disable Weekends | Selector utilizado para desactivar los fines de semana del calendario. Haz clic en la flecha y elige uno de los dos valores del menú desplegable. Selecciona true para desactivar los fines de semana o false para mantenerlos activados. | ||||||
Visible | Atributo que define si el componente es visible en la app. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el componente sea visible en la app o false para que no lo sea. El valor por defecto es true. | ||||||
Disabled Copy/Paste | Atributo que desactiva las opciones de copiar y pegar de las apps web para que el usuario de la app no pueda copiar y pegar textos al introducir texto en el campo de entrada de texto. Haz clic en la flecha y elige uno de los valores del menú desplegable. Selecciona true para desactivar la opción copiar/pegar o false para mantenerla activada. NotaEl atributo de desactivación de copiar/pegar se aplica tanto a las opciones Copy and Paste disponibles al pulsar el botón derecho del ratón como a los comandos de teclado CTRL+ C y CTRL+ V. | ||||||
Max File Size (MB) | Atributo que define el tamaño máximo del archivo a ser cargado por el usuario. Para configurarlo, ingresa un número integro o decimal. ImportanteEste atributo debe configurarse si el atributo File tiene la opción File seleccionada. Aplica solo para apps web. | ||||||
On Max File Size Exceeded | Acción ejecutada cuando el usuario carga un archivo que excede el tamaño máximo definido. Para definir una acción, haz clic en los tres puntos verticales. En el modal Create New Link que se abre, selecciona una acción del menú y configurala. Luego, haz clic en Accept. ImportanteEste atributo debe configurarse si el atributo File tiene la opción File seleccionada. Aplica solo para apps web. | ||||||
Encode File | Token en el cual se almacenarán los datos del atributo Encode del archivo después de que se ejecute el conjunto de acciones On Change de la pestaña Actions. Haz clic en el campo e introduce el token. | ||||||
Call onDateInputComplete when clean | Haz clic en la flecha y elige un valor en el menú desplegable. Selecciona true o false. | ||||||
Normalize padding | Atributo que normaliza el relleno en dispositivos iOS, para que los datos introducidos por el usuario de la app se muestren de la misma forma que en dispositivos Android. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que se normalice el relleno o false para que no se apliquen cambios al relleno del componente. SugerenciaEn los dispositivos iOS, los datos introducidos por el usuario de la app se colocan directamente en el borde izquierdo del componente, mientras que en los dispositivos Android hay un espacio entre el borde y el primer carácter del texto introducido. | ||||||
Keyboard Options | Atributo que define el comportamiento del teclado virtual. Haz clic en la flecha y elige una opción del menú desplegable. Consulta la siguiente tabla para saber más sobre las opciones disponibles.
| ||||||
Important For Accessibility | Atributo que define si el lector de pantalla lee o ignora el valor definido en el atributo Accessibility Text del componente. Haz clic en la flecha y selecciona una opción del menú desplegable. Elige true para que el lector de pantalla lea el componente o false para que el lector de pantalla no lea el componente. El valor por defecto es false. | ||||||
Accessibility Text | Texto alternativo. Añade un texto breve para describir el componente a los usuarios que no puedan verlo. El texto será leído por iOS Voice Over o Android Talk Back. También puedes añadir el texto de accesibilidad al diccionario de traducciones o seleccionar una traducción existente si hay idiomas seleccionados en los ajustes de tu rama.Settings | ||||||
Accessibility Order | Atributo que indica al lector de pantalla el orden en que debe leer los componentes. Para configurarlo, haz clic en el campo e introduce un número para definir el orden. Por ejemplo, si este componente debe leerse en tercer lugar, introduce el valor 3. Si no configuras un orden personalizado, los componentes se leen de arriba hacia abajo y de izquierda a derecha de la pantalla. |
En esta sección se configuran los atributos para alinear el texto dentro del componente y se establecen las propiedades de margen y relleno. Consulta la tabla a continuación para obtener más información.
Alineación del texto | Haz clic en la opción de alineación deseada. Haz clic en la opción de alineación deseada: (de izquierda a derecha) justificada, izquierda, centrada o derecha , dependiendo de si desea que el texto se alinee con los bordes izquierdo y derecho, con el borde izquierdo, centrado entre los dos bordes del componente o alineado con el borde derecho. También puedes hacer clic en </> y escribir el código para establecer la alineación del texto manualmente. |
En esta sección se configura el estilo del componente. Consulta la tabla a continuación para obtener más información.
Resource Origin | Método a través del cual se carga el recurso referenciado por el componente. Rellena este campo si el componente seleccionado hace referencia a un recurso, como una imagen o un video. Haz clic en la flecha y selecciona una de las opciones disponibles en el menú desplegable: elige L (Local) para recuperar el contenido codificado de los recursos locales o elige H (HTTP) para recuperar el contenido de los recursos del Communication Server. |
Border Color Focus | Color fijado en el borde del componente cuando se hace foco en el 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 para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. SugerenciaEl foco se sitúa en el componente siempre que el usuario de la app haga clic en él, lo toque o lo seleccione pulsando la tecla TAB. |
En esta sección, puedes definir el orden de los componentes dentro de la pantalla. Consulta la tabla a continuación para obtener más información.
Z-Index | Propiedad que define el orden de posición de los componentes. Si varios componentes se solapan, los componentes con un índice Z más alto se colocarán sobre los que tengan un índice más bajo. Este campo se rellena automáticamente. |
En esta sección, puedes establecer los diferentes atributos disponibles para configurar la información sobre el tooltip del componente. Consulta la tabla a continuación para obtener más información.
Tooltip Enabled | Determina si el tooltip está activado en la app para el componente seleccionado. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para activar el tooltip o false para desactivarlo. | ||||||||||
Color | Color del texto de tooltip Para establecer un color, haz clic en el campo y escribe el código hexadecimal del color o haz clic en el ícono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. | ||||||||||
Font Size | Tamaño del texto de tooltip. Para establecer el tamaño, haz clic en el campo y escribe el valor deseado. Consulte la tabla a continuación para obtener más información sobre los tipos de tamaños de texto y los valores disponibles.
| ||||||||||
Font Family | Familia de fuentes o tipo de letra del texto de tooltip. Para establecer una familia de fuentes, haz clic en la flecha y selecciona una opción del menú desplegable. También puedes hacer clic en </> y escribir el código para establecer manualmente la familia de fuentes del texto. | ||||||||||
Background Color | Color de fondo del tooltip. Para establecer un color, haz clic en el campo y escribe el código hexadecimal del color o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. En el selector de color, seleccione un color o introduzca el código de color hexa o rgba, respectivamente. | ||||||||||
Position | Haz clic en la flecha y selecciona una opción del menú desplegable para fijar la posición del tooltip con respecto al componente: Bottom, Left, Right o Top. |
En esta sección, puedes establecer atributos para que el usuario de la app introduzca las fechas de inicio y fin en el componente cuando utilice la app.
Separator | Texto que especifica cómo se separan las fechas de inicio y fin. Por ejemplo, en «04/01/2021 to 04/15/2021», el separador es «to». |
Rango de fechas del menú | Configuración del menú izquierdo que se muestra en una vista previa del calendario. Debe establecerse en formato JSON. Ejemplo: |
End Date Autodump | Token en el que se almacenará la fecha final. Introduce el valor del token. |
End Date Value | La fecha final aparece como DD/MM/AAAA. Haz clic en el campo e introduce la fecha. |
El único atributo a configurar es el selector de tiempo de formato (h), que permite visualizar la selección de tiempo en formato de 12 o 24 horas. Para establecer el atributo, haga clic en la flecha y seleccione 12 o 24 en el menú desplegable.
En esta sección, puedes establecer atributos avanzados relacionados con el diseño del componente, así como acciones que se ejecutarán en circunstancias específicas. Consulta la tabla a continuación para obtener más información.
Style | Este atributo está obsoleto. |
On Complete Valid | Acción ejecutada si el usuario de la app completa el campo de texto con el número de caracteres configurado y los datos introducidos son válidos según la expresión regular definida. Para saber cómo configurarlo, consulta Events & Actions. |
On Complete Invalid | Acción ejecutada si el usuario de la app completa el campo de texto con el número de caracteres configurado y los datos introducidos no son válidos según la expresión regular definida. Para saber cómo configurarlo, consulta Events & Actions. |
On valid | La acción que se produce tras un evento onChange, que implica cambiar el valor del texto del componente y se establece en la pestaña Actions del panel derecho, es ejecutada por el usuario de la app y cumple con la expresión regular y los valores de longitud mínima y máxima definidos. Para saber cómo configurarlo, consulta Events & Actions. |
On Invalid | Acción que se produce tras la ejecución de un evento onChange por parte del usuario de la app y que no cumple con la expresión regular ni los valores de longitud mínima y máxima definidos. Para saber cómo configurarlo, consulta Events & Actions. |
On Clear | Acción que se ejecutará cuando el usuario de la app introduzca el último carácter en el campo del componente. Para saber cómo configurarlo, consulta Events & Actions. |
Input Mask | Atributo que permite utilizar distintos tipos de entrada de datos (por ejemplo, moneda o decimales). |
Type | Atributo que especifica cómo puede implementarse visualmente la funcionalidad del componente. Haz clic en la flecha y selecciona una opción del menú desplegable. Las opciones incluyen: calendario, fecha, fechaRango, correo electrónico, archivo, máscara, número, PIN, rutchile, texto, textMultiline, timePicker y url. ImportanteLas opciones Daterange, File, Time picker y rutChile sólo pueden usarse en apps web. Las opciones PIN e email sólo pueden usarse en apps móviles. |
Proteger con captcha | Atributo que agrega una entrada a la función de protección reCAPTCHA de Google. Para configurar este atributo, haz clic en la flecha y elige uno de los dos valores del menú desplegable. Seleccione true para añadir una entrada a la función de protección o seleccione false para no añadirla. |
Custom File Loader | Haz clic en la flecha y elige un valor en el menú desplegable. Selecciona true o false. |
Custom File Button Text | Haz clic en la flecha y elige un valor en el menú desplegable. Selecciona true o false. |
Texto vacío de archivo personalizado | Contacta a tu Admin para aprender a configurar este atributo. |
Target Var File Name | Introduce el nombre del archivo var de destino. |
Min Limit Date | Atributo que indica el número de días visibles en el calendario anteriores a la fecha actual en la que el usuario está utilizando la app. Si no se establece ningún número, no se definirá ninguna fecha límite mínima en el calendario. Haz clic en el campo e introduce el número de días deseado. |
Max Limit Date | Atributo que indica el número máximo de días visibles por delante de la fecha actual. Si no se establece ningún número, no se definirá ninguna fecha límite máxima en el calendario. Haz clic en el campo e introduce el número de días deseado. |
File Filter Type | Código estándar aplicable al tipo de archivo mostrado por la ventana de carga de archivos. Haz clic en el campo e introduce el código. |
Datepicker Button Image | Imagen del botón de selección de fecha. Para establecer la imagen, haz clic en el campo y escribe el nombre de la imagen, o haz clic en el ícono de la lupa para abrir el selector de imágenes. A continuación, selecciona una de las imágenes disponibles en la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre y haz clic en ella. |
Hide Clear Button | Atributo que oculta el botón que permite al usuario de la app borrar los datos introducidos en el campo de texto del componente. Selecciona true para ocultar el botón o selecciona false para que el botón se muestre en la app. ImportanteEste atributo solo está disponible para dispositivos iOS. |
En esta sección, puedes establecer una sugerencia para el componente con sus atributos. En los componentes de entrada de texto, las sugerencias ayudan al usuario de la app a comprender el tipo de datos que debe introducir en el campo de texto al utilizar la app.
Hint | Hint text. Para establecer el contenido, haz clic en el campo e introduce la palabra o frase deseada. | ||||||||||
Hint Color | Color del texto de la sugerencia. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. | ||||||||||
Hint Font Size | Tamaño del texto de la sugerencia. Para establecer el tamaño, haz clic en el campo y escribe el valor deseado. Consulte la tabla a continuación para obtener más información sobre los tipos de tamaños de texto y los valores disponibles. A continuación, haz clic en la flecha situada a la derecha del campo y selecciona una unidad de medida en el menú desplegable.
| ||||||||||
Hint Font Family | Familia de fuentes o tipo de letra del texto de la sugerencia. Para establecer una familia de fuentes, haz clic en la flecha y selecciona una opción del menú desplegable. También puedes hacer clic en </> y escribir el código para establecer la familia de fuentes manualmente. | ||||||||||
Hint Font Style | Estilo de fuente del texto de la sugerencia. Para definir el estilo de fuente, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la italic. | ||||||||||
Hint Font Weight | Peso de la fuente del texto de la sugerencia Para establecer el peso de la fuente, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la negrita. | ||||||||||
Hint Text Decoration | Decoración añadida al texto. Para fijar la decoración, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es el subrayado. |
En esta sección, puedes configurar los íconos que se colocarán en los lados izquierdo y derecho del componente. Los íconos se mostrarán dentro del espacio del componente.
Left Icon | Para colocar un ícono en la parte izquierda del componente, haz clic en el campo y escribe el nombre de la imagen, o haz clic en el ícono de la lupa para abrir el selector de imágenes. A continuación, selecciona una de las imágenes disponibles en la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. |
Left Icon Color | Para establecer un color para el ícono situado a la izquierda, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. |
Right Icon | Para colocar un ícono en la parte derecha del componente, haz clic en el campo y escribe el nombre de la imagen, o haz clic en el ícono de la lupa para abrir el selector de imágenes. A continuación, selecciona una de las imágenes disponibles en la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. |
Right Icon Color | Para establecer un color para el ícono situado a la derecha, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. |
En esta sección, puedes establecer los atributos aplicables al contenido de texto del componente que será visible en la app. Consulta la tabla a continuación para obtener más información.
Font Family | Familia de fuentes o tipo de letra del texto. Para establecer una familia de fuentes, haz clic en la flecha y selecciona una opción del menú desplegable. También puedes hacer clic en </> y escribir el código para establecer manualmente la familia de fuentes del texto. | ||||||||||
Color | Color del texto. 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. En el selector de color, seleccione un color o introduzca el código de color hexa o rgba. | ||||||||||
Font Size | Tamaño del texto. Para establecer el tamaño, haz clic en el campo y escribe el valor deseado. Consulte la tabla a continuación para obtener más información sobre los tipos de tamaños de texto y los valores disponibles.
| ||||||||||
Font Style | Estilo de fuente del texto. Para definir el estilo de letra, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la cursiva. | ||||||||||
Font Weight | Peso de la fuente del texto. Para establecer el peso de la fuente, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la negrita. | ||||||||||
Text Decoration | Decoración añadida al texto. Para fijar la decoración, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es el subrayado. |
Actions
En esta sección, puedes establecer eventos o acciones en el componente que serán activados por otras acciones determinadas. Por ejemplo, si la acción configurada es «On Click», se activará un evento o acción cuando el usuario de la app haga clic en el componente. Consulta la tabla a continuación para obtener más información sobre cada acción.
On Hold | Acción que consiste en hacer clic en el componente y mantenerlo pulsado durante más de un segundo. |
On Click | Acción que consiste en hacer clic o tocar el componente. |
On Focus | Acción que implica centrarse en el componente. Por ejemplo, pulsando sobre el campo de texto del componente para empezar a escribir. |
On Blur | Acción que implica perder de vista ese mismo componente. |
On Change | Acción que implica cambiar el valor del componente. |
Debounce onChange | Atributo que indica a la app que debe esperar a que el usuario termine de ingresar el texto antes de ejecutar la acción definida en el atributo OnChange. El sistema esperará 300 milisegundos antes de ejecutar la acción; si el usuario continúa escribiendo antes de ese plazo, el contador comienza de nuevo. Por defecto, no se asigna ningún valor. Haz clic y selecciona una opción: true para que la app espere para ejecutar la acción, o false para permitir que la app procese cualquier acción mientras el usuario ingresa texto. NotaEste atributo evita que el sistema de la app realice búsquedas o validaciones innecesarias y mejora el desempeño de la app y su velocidad. |
On DateInput Complete | Acción que consiste en completar una fecha en un campo de fecha escribiendo la fecha o seleccionándola en el calendario. NotaAplica si el componente se utiliza para ingresar o seleccionar una fecha. |
Left Icon On Click | Acción que se ejecuta cuando el usuario hace clic en el ícono a la izquierda del text input. Si no hay un ícono, esta acción no estará disponible. |
En todos los casos, para configurar el evento o la acción, escribe la acción que deseas activar en el campo correspondiente o haz clic en los tres puntos verticales. Se abre la ventana Create new link. Haz clic en la flecha y selecciona uno de los tipos de enlace disponibles en el menú desplegable: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen oInterface Message. Aparece un nuevo menú desplegable. Haz clic en la flecha hacia abajo y selecciona la acción o evento dentro del tipo seleccionado. A continuación, completa los parámetros aplicables a la opción seleccionada. Una vez configurados los parámetros necesarios, haz clic en Accept.Instanciar un módulo de tipo pantalla
En esta sección, puedes establecer diferentes efectos sobre los atributos del componente y las animaciones a través de las cuales se producen los efectos. En primer lugar, debes seleccionar los atributos para los que deseas establecer efectos. Consulta la tabla a continuación para obtener más información.
Alpha | Efecto sobre la transparencia u opacidad del componente. Introduce el valor para establecer la opacidad inicial del componente antes de que se ejecute la animación. El valor puede oscilar entre 0 y 1, considerando 1 como el valor que otorga el mayor nivel de transparencia. |
Scale | Efecto sobre la dimensión del componente. Introduce el valor para establecer la escala inicial del componente antes de que se ejecute la animación. Por defecto, el valor de escala es 1, que equivale al tamaño original del componente. El valor puede ser cualquier número empezando por 1. |
A continuación, configuras la animación a través de la cual se ejecutan los efectos previamente definidos. La única animación disponible es On Load Effect, que se produce inmediatamente después de que se cargue la pantalla. Puedes establecer el código de la animación o configurarla con el Animation Editor. Para configurar la animación, haz clic en </> y, a continuación, en el campo de texto para empezar a escribir el código o haz clic en los tres puntos verticales para abrir el Animation Editor. Para saber más sobre el Animation Editor, lee Actions.Actions