Nuancier swatches

Les nuanciers se composent d’une ligne d’images miniatures avec des boutons de défilement facultatifs à gauche et à droite.

Les boutons de défilement ne sont visibles sur le bureau que si toutes les miniatures ne peuvent pas tenir dans la largeur du conteneur. Sur les appareils mobiles, ou si les miniatures peuvent tenir dans la largeur du conteneur, les boutons de défilement ne s’affichent pas.

Propriétés CSS des échantillons

L’aspect du conteneur d’échantillons est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7flyoutviewer .s7swatches
propriété CSS
Description
width
Largeur des échantillons.
height
Hauteur des échantillons.
bottom
Décalage des échantillons verticaux par rapport au conteneur de la visionneuse.

Exemple : pour configurer des échantillons à 460 x 100 pixels :

.s7flyoutviewer .s7swatches {
 width: 460px;
 height: 100px;
}

Propriétés CSS de l’espacement des échantillons de miniatures

L’espacement entre les miniatures d’échantillon est contrôlé à l’aide du sélecteur de classe CSS :

.s7flyoutviewer .s7swatches .s7thumbcell
propriété CSS
Description
margin
Taille de la marge horizontale et verticale autour de chaque miniature. L’espacement réel des miniatures est égal à la somme des marges gauche et droite définies pour .s7thumbcell .

Exemple : pour configurer l’espacement sur 10 pixels verticalement et horizontalement :

.s7flyoutviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

Propriétés CSS des échantillons de miniatures

L’aspect des miniatures individuelles est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7flyoutviewer .s7swatches .s7thumb
propriété CSS
Description
width
Largeur des échantillons de miniatures.
height
Hauteur des échantillons de miniatures.
bordure
Bordure des échantillons de miniatures.
NOTE
La miniature prend en charge le sélecteur d’attributs state, qui est utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected" correspond à la miniature de l’image actuellement affichée dans la vue principale, state="default" correspond au reste des miniatures et state="over" est utilisé lorsque vous pointez dessus.

Exemple : pour configurer des miniatures de 56 x 56 pixels, utilisez une bordure grise claire et une bordure sélectionnée en gris foncé :

.s7flyoutviewer .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7flyoutviewer .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

Propriétés CSS des boutons de défilement gauche et droite

L’aspect des boutons de défilement gauche et droite est contrôlé à l’aide des sélecteurs de classe CSS suivants :

.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton

Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS top, left, bottom et right. La logique de la visionneuse les positionne automatiquement.

propriété CSS
Description
width
Largeur du bouton de défilement.
height
Hauteur du bouton de défilement.
background-image
Image affichée pour un état de bouton donné.
background-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir Sprites CSS.

NOTE
Ce bouton prend en charge le sélecteur d’attributs state, qui est utilisé pour appliquer différents habillages aux états de bouton up, down, over et disabled.

Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer des boutons de défilement de 56 x 56 pixels et dont l’illustration est différente pour chaque état :

.s7flyoutviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8