Utilisation des widgets > 2D > Etiquette
  
Etiquette
A quoi sert ce widget ?
Le widget Etiquette peut être utilisé comme étiquette de formulaire ou en-tête de zone, selon l'alignement du texte et les styles appliqués.
Quand faut-il utiliser ce widget ?
Utilisez le widget Etiquette lorsque vous souhaitez inclure du texte dans une expérience. L'étiquette peut comporter un ou deux mots ou un texte plus long.
Comporte-t-il des propriétés, services, événements ou actions spéciaux ?
Pour afficher la liste des propriétés, services et événements communs des widgets, consultez la rubrique Propriétés, services et événements communs à plusieurs widgets.
Les tableaux suivants présentent les propriétés, les services et les événements spécifiques à ce widget.
Propriété
JavaScript
Type
Description
Activer mise en forme basée sur l'état
enableStateFormatting
boolean
Permet de mettre en forme le widget en fonction des définitions d'état qui ont été définies dans ThingWorx.
Si la case à cocher est sélectionnée, les propriétés suivantes s'affichent :
• Champ dépendant
• Définition d'état
Par exemple, si la définition d'état d'une étiquette a la valeur error, l'étiquette devient rouge.
Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
Champ dépendant
* 
Visible lorsque l'option Activer formatage basé sur l'état est activée.
stateFormatValue
string
Cette propriété est visible si la case Activer formatage basé sur l'état est cochée. Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
Définition d'état
* 
Visible lorsque l'option Activer formatage basé sur l'état est activée.
stateFormat
boolean
Cette propriété est visible si la case Activer formatage basé sur l'état est cochée. Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
Renvoi à la ligne texte d'étiquette
wrap
boolean
Lorsque cette case est cochée, le renvoi à la ligne du texte de l'étiquette est autorisé.
Fonctionnement du widget
Voici un exemple de ce à quoi peut ressembler votre widget !
Etapes minimales requise pour l'utilisation
Apparence
1. Faites glisser et déposez un widget Etiquette sur le canevas. Dans cet exemple, nous avons placé des étiquettes dans les cellules d'un widget Disposition de grille.
2. Entrez le texte que vous souhaitez afficher dans le champ Texte.
* 
Pour appliquer un style aux étiquettes, nous avons ajouté les éléments suivants à l'expérience :
• Dans le volet PROJET sous Styles > Application :
.my-label {
font-family: Century Gothic;
font-color: black;
font-size: 12pt;
font-weight: normal;
font-style: normal;
}
• Dans le champ Classe pour chaque étiquette : my-label
Styliser le widget avec CSS
Vous pouvez utiliser CSS pour styliser le widget ! Voici un exemple de classe CSS que vous pouvez créer et appliquer :
* 
Rappelez-vous qu'il est préférable de donner à vos classes des noms uniques afin qu'ils ne soient pas en conflit avec d'autres classes ou propriétés prédéfinies.
Exemple de CSS
Apparence
.ptc-label {
font-size: 16px;
font-family: Century Gothic;
font-weight: bold;
color: Red;
};
Pour plus d'informations sur l'implémentation des classes CSS, consultez la rubrique Styles d'application.