Trabajar con widgets > 2D > Etiqueta
  
Etiqueta
¿Qué hace este widget?
El widget de Etiqueta se puede utilizar como etiqueta de formulario o como cabecera de área, según el uso de la alineación de texto y de la aplicación de estilos.
¿Cuándo se aconseja utilizar este widget?
La etiqueta se utiliza para incluir texto en una experiencia. La etiqueta es válida para incluir una o dos palabras, o para textos más largos.
¿Hay propiedades, servicios, eventos o acciones especiales?
Para ver una lista de propiedades, servicios y eventos comunes de widgets, consulte Propiedades, servicios y eventos comunes de widgets.
La tabla siguiente es una lista de propiedades, servicios y eventos específicos de este widget.
Propiedad
JavaScript
Tipo
Descripción
Activar formato basado en estado
enableStateFormatting
boolean
Permite aplicar formato al widget según las definiciones de estado que se hayan establecido en ThingWorx.
Si la casilla está seleccionada, aparecen las propiedades siguientes:
• Campo dependiente
• Definición de estado
Por ejemplo, si una etiqueta tiene un valor de Definición de estado de error, la etiqueta cambia a color rojo.
Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
Campo dependiente
* 
Visible cuando la opción Activar formato según estado está habilitada.
stateFormatValue
string
Esta propiedad está visible si se selecciona la casilla de verificación Activar formato según estado. Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
Definición de estado
* 
Visible cuando la opción Activar formato según estado está habilitada.
stateFormat
boolean
Esta propiedad está visible si se selecciona la casilla de verificación Activar formato según estado. Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
Ajustar texto de etiqueta
wrap
boolean
Cuando se selecciona esta casilla, se permite que el texto de la etiqueta se ajuste.
Widget en acción
A continuación se ofrece un ejemplo del aspecto que puede tener el widget.
Pasos mínimos para utilizarlo
Aspecto
1. Arrastre un widget de Etiqueta y suéltelo en el lienzo. En este ejemplo, se han colocado etiquetas en celdas de un widget de Diseño de cuadrícula.
2. En el campo Texto, escriba el texto que se debe mostrar.
* 
Para aplicar estilos a las etiquetas, hemos añadido lo siguiente a la experiencia:
• En el panel PROYECTO bajo Estilos > Aplicación:
.my-label {
font-family: Century Gothic;
font-color: black;
font-size: 12pt;
font-weight: normal;
font-style: normal;
}
• En el campo Clase para cada etiqueta:my-label
Aplicar estilos al widget con CSS
CSS puede utilizarse para aplicar estilos al widget. A continuación se muestra un ejemplo de una clase de CSS que se puede crear y aplicar:
* 
Es aconsejable asignar nombres exclusivos a las clases; de este modo, no entrarán en conflicto con otras clases ni con propiedades de OOTB.
Ejemplo de CSS
Aspecto
.ptc-label {
font-size: 16px;
font-family: Century Gothic;
font-weight: bold;
color: Red;
};
Para obtener más información sobre cómo implementar clases de CSS, consulte Estilos de aplicación.