Page vue page-view
La vue principale se compose de l’image du catalogue. Il peut être glissé pour accéder à une autre page ou agrandi.
Propriétés CSS de la zone de visionneuse principale
L’aspect de la zone d’affichage est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7pageview
Exemple : pour rendre la vue principale transparente.
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
Sur les systèmes de bureau, le composant prend en charge la variable cursortype
sélecteur d’attributs qui peut être appliqué à .s7pageview
et contrôle le type du curseur en fonction de l’état du composant et de l’action de l’utilisateur. Les éléments suivants cursortype
sont prises en charge :
Le séparateur de page qui sépare visuellement les pages gauche et droite de l’étendue du catalogue est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7pageview .s7pagedivider
Exemple : pour un séparateur de page de 40 pixels de large avec une image semi-transparente.
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
frametransition
le modificateur est défini sur turn
ou auto
(sur les systèmes de bureau), l’aspect du séparateur de page est contrôlé à l’aide de la fonction pageturnstyle
et le .s7pagedivider
La classe CSS est ignorée.Il est possible de configurer l’affichage des curseurs de souris personnalisés sur la zone de visionneuse principale. Cette fonctionnalité est contrôlée avec les sélecteurs d’attributs supplémentaires appliqués à .s7ecatalogviewer .s7pageview
Classe CSS :
Exemple : utilisez des curseurs de souris différents pour chaque type d’état de composant.
.s7ecatalogviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}