Stylisation d'un conteneur
Vous pouvez appliquer un style à un conteneur via le thème stylistique de l'application composite ou directement dans le panneau Propriétés de style. Si vous utilisez des propriétés de style, celles-ci remplacent la stylisation de thème globale d'un widget spécifique. Par défaut, les conteneurs sont stylisés à l'aide du thème stylistique Application composite, mais vous pouvez également utiliser des définitions de style. La propriété UseTheme du panneau Propriétés contrôle le mode de création de thèmes d'un conteneur.
Pour afficher les propriétés du thème stylistique d'un conteneur, procédez comme suit :
1. Sélectionnez un conteneur dans le panneau Explorateur.
◦ Vous pouvez également cliquer sur une zone vide à l'intérieur d'un conteneur.
2. Cliquez sur le panneau Propriétés de style.
3. Développez l'état Base. Les propriétés de style sont répertoriées sous la section Container.
Vous pouvez passer de la stylisation du thème aux définitions de style. Pour utiliser des définitions de style, procédez comme suit :
1. Sélectionnez un conteneur.
2. Dans le panneau Propriétés, décochez la case UseTheme.
3. Cliquez sur le panneau Propriétés de style.
Les définitions de style du conteneur s'affichent à présent à la place des propriétés de style.
CSS personnalisées
Vous pouvez appliquer différentes combinaisons de styles à des conteneurs, tels que des styles CSS personnalisés, des thèmes stylistiques et des propriétés de style. La liste ci-après répertorie la priorité des règles de style, de la plus haute à la plus faible :
|
Priorité
|
Méthode de stylisation
|
Description
|
|---|---|---|
|
La plus élevée
|
Propriété de style
|
Styles appliqués à un conteneur à l'aide du panneau Propriétés de style. Vous pouvez utiliser les propriétés de style pour remplacer les styles par défaut qui sont appliqués à partir du thème stylistique.
|
|
CSS personnalisée d'application composite
|
Règles CSS appliquées à l'onglet CSS personnalisée d'une entité d'application composite. Une règle CSS d'application composite remplace une règle CSS de thème stylistique lorsque les deux règles ont la même spécificité.
|
|
|
CSS personnalisée de thème stylistique
|
Les règles CSS sont appliquées à l'onglet CSS personnalisée d'une entité de thème stylistique.
|
|
|
La plus faible
|
Thème stylistique
|
Styles hérités du thème stylistique appliqué à l'application composite. Vous pouvez utiliser des thèmes pour appliquer des styles par défaut cohérents à tous les conteneurs d'une application composite.
|
En général, la CSS de niveau application composite est prioritaire par rapport à la CSS du thème stylistique. Toutefois, la priorité peut changer en fonction de la spécificité des règles CSS. Par exemple, vous pouvez augmenter la spécificité d'une règle CSS personnalisée en ajoutant la règle !important à une propriété comme suit :
.containerClass > .widget-content {
margin: 50px !important;
padding: 25px !important;
}
margin: 50px !important;
padding: 25px !important;
}
 |
Nous vous recommandons vivement d'utiliser des thèmes stylistiques et des propriétés de style au lieu d'écrire des règles CSS personnalisées.
|
Propriétés de style
Vous pouvez spécifier les propriétés de style suivantes.
|
Propriété
|
Description
|
|---|---|
|
background
|
Couleur d'arrière-plan du conteneur.
|
|
border-color
|
Couleur des lignes de bordure.
|
|
border-radius
|
Rayon des coins de bordure. La propriété s'applique aux quatre coins du conteneur.
|
|
border-style
|
Style des lignes de bordure. Vous pouvez définir cette propriété sur Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Inherit ou None.
|
|
border-width
|
Largeur des lignes de bordure.
|
Vous pouvez utiliser des propriétés de style pour configurer le remplissage du conteneur dans ThingWorx 9.3.3 et versions ultérieures à l'aide des propriétés suivantes :
• padding-bottom
• padding-left
• padding-right
• padding-top
Pour plus d'informations, consultez la rubrique Configuration des marges et du remplissage des conteneurs.
Personnalisation des propriétés de style d'un conteneur
La table ci-après compare les valeurs de propriété de style de l'élément flexcontainer aux valeurs personnalisées d'un conteneur stylisé.
|
Style/Propriété
|
Par défaut
|
Stylisé
|
|---|---|---|
|
Propriétés
|
• background : #ffffff
• border-color : inherit
• border-radius : None
• border-style : None
• border-width : None
|
• background : #cccccc
• border-color : #AAE09F
• border-radius : 4px
• border-style : Solid
• border-width : 4px
|
|
Aperçu
|
 |
 |
|
|
Les valeurs par défaut des propriétés de style sont dérivées du thème stylistique Application composite.
|