Échantillons de couleurs color-swatches

Les échantillons de couleurs se composent d’une ligne d’images miniatures avec des boutons de défilement facultatifs sur les côtés gauche et droit. Les échantillons de couleurs 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.

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

.s7mixedmediaviewer .s7colorswatches .s7swatches

Propriétés CSS des échantillons de couleurs

width
Largeur des échantillons.
height
Hauteur des échantillons.
bas
Décalage des échantillons verticaux par rapport au conteneur de la visionneuse.

Exemple : pour configurer des échantillons d’une hauteur de 100 pixels.

.s7mixedmediviewer .s7colorswatches .s7swatches {
 height: 100px;
}

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

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

Exemple

Pour définir l’espacement sur dix pixels verticalement et horizontalement.

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

L’aspect de la miniature individuelle est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

propriété CSS
Description
width
Largeur de la miniature.
height
Hauteur de la miniature.
bordure
Bordure de la miniature.
NOTE
La miniature prend en charge le state sélecteur d’attributs qui peut être 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ée lorsque vous pointez avec la souris.

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

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

Il n’est pas possible de positionner des boutons de défilement à l’aide de CSS top, left, bottom, et right propriétés. 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é.
arrière-plan-position

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

Voir Sprites CSS.

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

Exemple : pour configurer des boutons de défilement de 56 x 56 pixels et ayant des illustrations différentes pour chaque état.

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