Miniatures

Les miniatures se composent d’une grille d’images miniatures avec une barre de défilement facultative sur le côté droit pour permettre le défilement vertical.

Les miniatures sont activées en cliquant sur le bouton miniature dans la barre de contrôle principale. Lorsque les miniatures sont principales, elles s’affichent en mode modal superposées sur l’interface utilisateur du lecteur de contenu. La logique du lecteur redimensionne automatiquement le conteneur des miniatures sur l’ensemble de la zone de visualisation.

L’aspect du conteneur des miniatures est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7thumbnailgridview

Propriété CSS	Description
haut	Décalage vertical du conteneur des miniatures par rapport au haut de la visionneuse.
margin-top	Marge supérieure.
marge-gauche	Marge gauche.
marge droite	La marge droite.
margin-bottom	Marge inférieure.
arrière-plan-couleur	Couleur d’arrière-plan de la zone des miniatures.

Exemple : pour configurer les miniatures de sorte qu’elles présentent un décalage de 32 pixels par rapport au haut, de 5 pixels par rapport à la gauche et à la droite et de 8 pixels par rapport au bas, avec un arrière-plan 0xDDDDDD.

.s7ecatalogviewer .s7thumbnailgridview { 
 top: 32px; 
 margin-left: 5px; 
 margin-right: 5px; 
 margin-bottom: 8px; 
 background-color: rgb(221, 221, 221); 
}

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

Propriété CSS	Description
margin	Taille de la marge horizontale et verticale autour de chaque miniature. L’espacement réel des miniatures horizontales est égal à la somme des marges gauche et droite définies pour .s7thumbcell . L’espacement vertical des miniatures est égal à la somme des marges supérieure et inférieure.

Exemple : pour définir un espace de 10 pixels verticalement et horizontalement.

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell { 
 margin: 5px; 
}

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

Propriété CSS	Description
width	Largeur de la miniature.
height	Hauteur de la miniature.
bordure	Bordure de la miniature.
arrière-plan-couleur	Couleur d’arrière-plan de la miniature.

Sur les périphériques tactiles, lorsque vous passez en mode portrait, le lecteur peut dimensionner les miniatures à la moitié de ce qui est configuré au cas où il déciderait de scinder le catalogue en pages individuelles.

REMARQUE

La miniature prend en charge le sélecteur d’attributs state, 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é lorsque vous pointez la souris.

Exemple : pour configurer des miniatures de 120 x 85 pixels, avec un arrière-plan blanc, une bordure standard en gris clair et une bordure sélectionnée en gris foncé.

.s7ecatalogviewer .s7thumbnailgridview .s7thumb { 
 width:120px; 
 height:85px; 
 background-color: rgb(255, 255, 255); 
 border: solid 1px #999999; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{ 
 border: solid 2px #666666; 
}

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

.s7ecatalogviewer .s7thumbnailgridview .s7label

Propriété CSS	Description
font-family	Nom de la police.
font-size	Taille de police.

Exemple : pour configurer des libellés afin qu’ils utilisent une police Helvetica de 14 pixels.

.s7ecatalogviewer .s7thumbnailgridview .s7label { 
 font-family: Helvetica,sans-serif; 
 font-size: 12px; 
}

Au cas où il y aurait plus de vignettes que de vignettes verticales dans la vue, les vignettes génèrent la barre de défilement verticale sur le côté droit. L’aspect de la zone de barre de défilement est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

Propriété CSS	Description
width	Largeur de la barre de défilement.
haut	Décalage de la barre de défilement verticale à partir du haut de la zone des miniatures.
bas	Décalage de la barre de défilement verticale à partir du bas de la zone des miniatures.
droite	Décalage de la barre de défilement horizontale à partir du bord droit de la zone des miniatures.

Exemple : pour configurer une barre de défilement de 28 pixels de large et d’une marge de 8 pixels en haut, à droite et en bas de la zone des miniatures.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar { 
 top:8px; 
 bottom:8px; 
 right:8px; 
 width:28px; 
}

La barre de défilement est la zone située entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur de la piste. Le suivi est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propriété CSS	Description
width	Largeur du suivi de la barre de défilement.
arrière-plan-couleur	Couleur d’arrière-plan du suivi de la barre de défilement.

Exemple : pour configurer une piste de barre de défilement de 28 pixels de large et d’un arrière-plan gris semi-transparent.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack { 
 width:28px; 
 background-color:rgba(102, 102, 102, 0.5); 
}

Le curseur de la barre de défilement se déplace verticalement dans la zone de suivi de défilement. Sa position verticale est entièrement contrôlée par la logique du composant. Cependant, la hauteur du pouce ne change pas dynamiquement en fonction de la quantité de contenu. La hauteur du pouce et d’autres aspects sont contrôlés avec le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propriété CSS	Description
width	Largeur du curseur de la barre de défilement.
hauteur	Hauteur de la miniature de la barre de défilement.
remplissage-haut	Marge intérieure verticale située entre le haut du rail de la barre de défilement.
remplissage-bas	Marge intérieure verticale située entre le bas du rail de la barre de défilement.
image d’arrière-plan	Image affichée pour un état de pouce donné.
arrière-plan-position	Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites .

REMARQUE

Thumb prend en charge le sélecteur d'attributs state, qui peut être utilisé pour appliquer différents habillages aux états de pouce up, down, over et disabled.

Exemple : pour configurer un pouce de barre de défilement de 28 x 45 pixels, avec des marges de 10 pixels en haut et en bas et une illustration différente pour chaque état.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb { 
 width:28px; 
 background-repeat:no-repeat; 
 background-position:center; 
 height:45px; 
 padding-top:10px; 
 padding-bottom:10px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
}

L’aspect des boutons de défilement supérieur et inférieur est contrôlé par les sélecteurs de classe CSS suivants :

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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.
hauteur	Hauteur du bouton.
image d’arrière-plan	Image affichée pour un état de pouce donné.
arrière-plan-position	Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites .

REMARQUE

Ces boutons prennent en charge le sélecteur d'attributs state, qui peut être utilisé pour appliquer différents habillages aux différents états de bouton up, down, over et disabled.

L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer des boutons de défilement de 28 x 32 pixels et présentant des illustrations différentes pour chaque état.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
}