Echantillons

Les échantillons sont constitués d’une rangée 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 périphériques mobiles ou si les miniatures peuvent s’ajuster à la largeur du conteneur, les boutons de défilement ne s’affichent pas.

Propriétés CSS des échantillons

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

.s7flyoutviewer .s7swatches

Propriété CSS	Description
width	Largeur des nuances.
height	La hauteur des nuances.
bas	Les nuances verticales sont décalées par rapport au conteneur de la visionneuse.

Exemple - pour configurer des nuances à 460 x 100 pixels :

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

Propriétés CSS de l’interlettrage des miniatures

L’espacement entre les miniatures d’échantillons 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 définir un espacement de 10 pixels verticalement et horizontalement :

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

Propriétés CSS des échantillons de miniature

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

.s7flyoutviewer .s7swatches .s7thumb

Propriété CSS	Description
width	Largeur des nuances de miniature.
hauteur	Hauteur des nuances de miniature.
bordure	Bordure des nuances de miniature.

REMARQUE

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 la souris.

Exemple : pour configurer des miniatures de 56 x 56 pixels, leur bordure par défaut est gris clair et leur bordure sélectionnée est 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 droit 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. Au lieu de cela, la logique du lecteur les positionne automatiquement.

Propriété CSS	Description
width	Largeur du bouton de défilement.
hauteur	Hauteur du bouton de défilement.
image d’arrière-plan	Image affichée pour un état de bouton donné.
arrière-plan-position	Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir CSS Sprites .

REMARQUE

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 présentant 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); 
}