La vue principale est constituée de l’image catalogue. Il peut être glissé pour atteindre une autre page ou faire l’objet d’un zoom.
Propriétés CSS de la zone de visualisation principale
L’aspect de la zone d’affichage est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7pageview
Propriété CSS |
Description |
---|---|
arrière-plan-couleur |
Couleur d’arrière-plan de la vue principale au format hexadécimal. |
curseur |
Curseur affiché sur la vue principale. |
Exemple - pour rendre la vue principale transparente.
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
Sur les systèmes de bureau, le composant prend en charge le sélecteur d'attributs cursortype
qui peut être appliqué à la classe .s7pageview
et contrôle le type du curseur en fonction de l'état du composant et de l'action de l'utilisateur. Les valeurs cursortype
suivantes sont prises en charge :
Valeur |
Description |
---|---|
par défaut |
S’affiche lorsque l’image ne peut pas faire l’objet d’un zoom en raison d’une résolution d’image réduite, de paramètres de composant ou des deux. |
zoomine |
S’affiche lorsque vous pouvez zoomer sur l’image. |
réinitialiser |
S’affiche lorsque l’image atteint le niveau de zoom maximal et peut être redéfinie à l’état initial. |
glisser |
S’affiche lorsque l’utilisateur effectue un panoramique sur l’image dont l’état est zoomé. |
diapositive |
S’affiche lorsque l’utilisateur effectue une permutation d’image en effectuant un balayage horizontal ou un clic sur la souris. |
Le séparateur de pages qui sépare visuellement les pages de gauche et de droite de la planche de catalogue est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7pageview .s7pagedivider
Propriété CSS |
Description |
---|---|
width |
Largeur du séparateur de page. Définissez sur 0 px pour masquer complètement le séparateur. |
image d’arrière-plan |
Image à utiliser comme séparateur de page. |
Exemple : pour avoir un séparateur de page de 40 pixels de large avec une image semi-transparente.
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
Lorsque le modificateur frametransition
est défini sur turn
ou auto
(sur les systèmes de bureau), l’aspect du séparateur de pages est contrôlé avec le modificateur pageturnstyle
et la classe CSS .s7pagedivider
est ignorée.
Il est possible de configurer l’affichage des curseurs de souris personnalisés sur la zone de visualisation principale. Ceci est contrôlé avec les sélecteurs d'attribut supplémentaires appliqués à la classe CSS .s7ecatalogsearchviewer .s7pageview
:
Propriété CSS |
Description |
---|---|
par défaut |
Normalement une flèche s’affiche pour les images non zoomables. |
zoomine |
Indique à quel moment une image peut être zoomée. |
réinitialiser |
Indique quand une image atteint le zoom maximal et peut être réinitialisée. |
glisser |
Indique le moment où l’utilisateur effectue une opération de glisser-déplacer sur un zoom dans l’image. |
diapositive |
Affiche le moment où l'utilisateur effectue un échange d'image à l'aide d'un mouvement de diapositive |
Exemple : utilisez des curseurs de souris différents pour chaque type d'état de composant.
.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}