Les Nuanciers principaux 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.
L’aspect du conteneur d’échantillons est contrôlé à l’aide du sélecteur de classe CSS :
.s7mixedmediaviewer .s7swatches
Propriétés CSS 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 .s7swatches {
height: 100px;
}
L’espacement entre les miniatures d’échantillon est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7mixedmediaviewer .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 .s7swatches .s7thumbcell {
margin: 5px;
}
L’aspect de la miniature individuelle est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7swatches .s7thumb
propriété CSS |
Description |
---|---|
width |
Largeur de la miniature. |
height |
Hauteur de la miniature. |
bordure |
Bordure de la miniature. |
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, vous devez définir une bordure par défaut en gris clair et une bordure sélectionnée en gris foncé.
.s7mixedmediaviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Le type de la ressource s’affiche sous la forme d’une icône superposée au-dessus de l’image miniature et est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
propriété CSS |
Description |
---|---|
width |
Largeur de la superposition de l’icône. |
height |
Hauteur de la superposition de l’icône. |
La superposition prend en charge la fonction type
sélecteur d’attributs avec les valeurs possibles suivantes : image
(pour les images uniques), swatchset
(pour les ensembles d’échantillons), spinset
(pour les visionneuses à 360°) et video
(pour les vidéos uniques ou les visionneuses de vidéos adaptatives).
Exemple : pour configurer des superpositions d’icônes pour des visionneuses à 360°, des ensembles d’échantillons et des vidéos :
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
background-image: url(images/v2/ThumbOverlayVideo.png);
}
L’aspect des boutons de défilement gauche et droite est contrôlé à l’aide des sélecteurs de classe CSS suivants :
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .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 place, 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 . |
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
.
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 ayant des illustrations différentes pour chaque état.
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}