Nuanciers swatches
Les nuanciers se composent d’une rangée de miniatures et de boutons de défilement facultatifs sur les côtés gauche et droit.
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é avec le sélecteur de classe CSS suivant :
.s7flyoutviewer .s7swatches
Exemple - Pour définir des échantillons à 460 x 100 pixels, procédez comme suit :
.s7flyoutviewer .s7swatches {
width: 460px;
height: 100px;
}
Propriétés CSS de l’espacement de l’échantillon de vignette
L’espacement entre les miniatures d’échantillons est contrôlé par le sélecteur de classe CSS :
.s7flyoutviewer .s7swatches .s7thumbcell
Exemple : pour définir un espacement de dix pixels verticalement et horizontalement :
.s7flyoutviewer .s7swatches .s7thumbcell {
margin: 5px;
}
Propriétés CSS des échantillons de miniatures
L’aspect de chaque miniature est contrôlé par le sélecteur de classe CSS suivant :
.s7flyoutviewer .s7swatches .s7thumb
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 vignettes et state="over" est utilisée lors du survol de la souris.Exemple : pour configurer des miniatures de 56 x 56 pixels, elles doivent avoir une bordure par défaut gris clair et une bordure sélectionnée 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 droit
L’apparence des boutons de défilement gauche et droit est contrôlée par les sélecteurs de classe CSS suivants :
.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton
Il est impossible de positionner les boutons de défilement à l’aide de CSS top, left, bottomet right des propriétés. Au lieu de cela, la logique de la visionneuse les positionne automatiquement.
Position à l’intérieur du sprite de l’illustration, si des sprites CSS sont utilisés.
Voir SpritesCSS.
state , qui permet d’appliquer différents habillages aux états des boutons up, down, over, et disabled.Les info-bulles des boutons peuvent être localisées. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.
Exemple : pour configurer des boutons de défilement de 56 x 56 pixels avec des illustrations différentes 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);
}