Stylisation d'un conteneur
Les applications composites dynamiques avancées incluent des conteneurs auxquels vous pouvez appliquer un thème stylistique. Vous pouvez appliquer un style via le thème stylistique Application composite ou directement dans le panneau Propriétés de style. 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 l'élément flexcontainer.
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.
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.
|
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.
|