Text Label
El componente Text Label es un cuadro de texto que proporciona información específica al usuario de la app y no requiere la introducción de datos. Para insertar un componente de Text Label en la pantalla, ve al panel izquierdo en el constructor visual. Recorre la lista de componentes para encontrar el componente Text Label 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.Construcción de pestañas y panel izquierdo
Importante
El componente Text Label puede utilizarse en apps web y móviles (tanto para dispositivos Android como iOS).
Attributes
Lee las sección a continuación para aprender más acerca de los atributos del panel derecho que aparecen al arrastrar y soltar el componente en el canvas.
Importante
Esta sección es informativa. Configura los atributos para tu componente según los requerimientos de tu proyecto.
Design

Primero, debes modificar el nombre para representar su posición en la pantalla. Por ejemplo, el nombre puede ser lblName.
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 márgenes | 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.
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 de la sección Basic de la pestaña Design. Haz clic en el campo y escribe un valor para que se aplique automáticamente al componente. |
Background Image | Imagen aplicada al fondo del componente. |
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. |
Profile Option | Código aplicado en referencia al perfil de usuario de la app. Haz clic en el campo e introduce el código. |
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 NotaPara evitar problemas de renderizado, evita utilizar emoticones en el atributo Value del componente. Puedes agregar el valor al diccionario de traducciones o seleccionar una traducción existente si ya definiste idiomas en la configuración de la app. SugerenciaSi no completas este campo, también puedes introducir el texto con un doble clic en el componente y escribir el texto deseado. Una vez completado el campo Value, no podrás utilizar esta opción. |
Single Line | Atributo que indica que el valor del texto debe mostrarse en una sola línea dentro del componente. Haz clic en el campo y selecciona true para activar esta opción o deja el campo vacío. SugerenciaEl único valor en el menú es true. |
Single Line Mode | Atributo que indica cómo se reduce el valor del texto del componente para mostrarse en una sola línea. Las opciones disponibles son: Ellipsis End, EllipsisMiddle, EllipsisStart, Stretch, TrimChar, TrimWord. SugerenciaPara configurar este atributo, el valor del atributo Single Line debe ser verdadero. |
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. |
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. |
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. SugerenciaLa alineación justificada está disponible para apps web y móviles. |
Background Color | Color de fondo del componente. 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. |
Background Gradient | Gradiente de color definido para el fondo del componente. Para establecer el degradado, debes introducir la dirección del degradado (horizontal o vertical) y los códigos hexadecimales de los dos colores del degradado, todos separados por comas. Por ejemplo, para establecer un degradado en dirección horizontal, introduce lo siguiente: h,#673AB7,#949AC8. Para establecer un degradado en dirección vertical, introduce: v,#673AB7,#949AC8. NotaSi estableces un color de fondo, no se aplicará el degradado. Recuerda que debes completar una de las dos opciones. |
Background Image | Imagen aplicada al fondo del componente. Para agregar una imagen, haz clic en el campo Background Image y escribe el nombre de la imagen de fondo, o haz clic en el ícono de la lupa para abrir el selector de imágenes. Selecciona una de las imágenes disponibles en la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. |
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. |
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. |
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. | ||||||||||
Message | Mensaje mostrado por el tooltip. Introduce un mensaje que se mostrará en pantalla. | ||||||||||
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. |
Line Spacing | Determina el espacio entre líneas del texto del componente. Por defecto, se configura con el valor de la fuente para el tamaño de fuente seleccionado. Para definir el espacio, ingresa un número (integro o decimal) y la expressión px. Por ejemplo: 12px or 12.5px. Si defines el valor en 0px, las líneas de las fuentes se superposicionan. Si ingresas un valor en letras (por ejemplo, newtest), la configuración no tendrá efecto y se aplicará el valor por defecto definido anteriormente. NotaEl atributo solo acepta tamaños en px (unidad de medida utilizada para fuentes). Evita usar valores negativos. | ||||||||||
Character Spacing | Determina el espacio entre caracteres del texto del componente. Por defecto, se configura con el valor de la fuente para el tamaño de fuente seleccionado. Para definir el espacio, ingresa un número (integro o decimal) y la expressión px. Por ejemplo: 12px or 12.5px. NotaEl atributo solo acepta tamaños en px (unidad de medida utilizada para fuentes). Si usas valores negativos, el espacio entre caracteres disminuye. Si defines el valor en 0px, las líneas de las fuentes se superposicionan. Si ingresas un valor en letras (por ejemplo, newtest), la configuración no tendrá efecto y se aplicará el valor por defecto definido anteriormente. | ||||||||||
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 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. | ||||||||||
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. | ||||||||||
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. |
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 Double Click | Acción que consiste en hacer clic o tocar dos veces el componente. |
On Click | Acción que consiste en hacer clic o tocar el componente. |
En todos los casos, para establecer el evento o la acción que debe activarse, escribe la acción en el campo correspondiente o haz clic en los tres puntos verticales. Se abre la ventana Create new link. Haz clic en la flecha hacia abajo 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 o Interface 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
Alpha | 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 | 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, se configura la animación a través de la cual se ejecutarán los efectos previamente definidos. Consulta la tabla siguiente para obtener más información sobre las animaciones disponibles.
On Load Effect | Animación ejecutada inmediatamente después de cargar la pantalla. |
On Call Effect | Animación ejecutada al invocarla a través de un mensaje. |
En todos los casos, puedes establecer el código de la animación o configurarla con el Editor de animaciones. Para configurar la animación, haz clic en </> y, a continuación, haz clic en el campo de texto para empezar a escribir el código o haz clic en los tres puntos verticales para abrir el Editor de animación. Consulta Actions para aprender a utilizar el editor.Actions