La vista principal consiste en la imagen del catálogo. Se puede realizar un barrido para llegar a otra página o ampliar.
Propiedades CSS del área principal del visor
El aspecto del área de visualización se controla con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7pageview
CSS, propiedad |
Descripción |
---|---|
background-color |
Color de fondo de la vista principal en formato hexadecimal. |
cursor |
Cursor que se muestra sobre la vista principal. |
Ejemplo: para que la vista principal sea transparente.
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
En los sistemas de escritorio, el componente admite el cursortype
selector de atributos que se puede aplicar a .s7pageview
y controla el tipo del cursor en función del estado del componente y la acción del usuario. Lo siguiente cursortype
son compatibles:
Valor |
Descripción |
---|---|
predeterminado |
Se muestra cuando la imagen no se puede ampliar debido a una pequeña resolución de imagen, a la configuración de componentes o a ambos. |
zoomina |
Se muestra cuando se puede ampliar la imagen. |
restablecer |
Se muestra cuando la imagen se encuentra en el nivel de zoom máximo y se puede restablecer al estado inicial. |
arrastrar |
Se muestra cuando el usuario panorámica la imagen que está en estado de zoom. |
diapositiva |
Se muestra cuando el usuario realiza un intercambio de imágenes realizando un barrido horizontal o una flexión. |
El divisor de páginas que separa visualmente las páginas izquierda y derecha de la extensión del catálogo se controla con el siguiente selector de clases CSS:
.s7ecatalogviewer .s7pageview .s7pagedivider
CSS, propiedad |
Descripción |
---|---|
width |
Ancho del divisor de páginas. Establecer como 0 px para ocultar el divisor completamente. |
imagen de fondo |
La imagen que desea usar como divisor de página. |
Ejemplo: para tener un divisor de página de 40 píxeles de ancho con una imagen semitransparente.
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
Cuando la variable frametransition
modificador está configurado en turn
o auto
(en sistemas de escritorio), el aspecto del divisor de páginas se controla con la variable pageturnstyle
y .s7pagedivider
Se ignora la clase CSS.
Es posible configurar la visualización de los cursores personalizados del ratón sobre el área del visor principal. Esta funcionalidad se controla con los selectores de atributos adicionales aplicados a .s7ecatalogviewer .s7pageview
Clase CSS:
CSS, propiedad |
Descripción |
---|---|
predeterminado |
Normalmente es una flecha que se muestra para la imagen no ampliable. |
zoomina |
Muestra cuándo se puede ampliar una imagen. |
restablecer |
Muestra cuándo una imagen tiene el máximo zoom y se puede restablecer. |
arrastrar |
Muestra cuándo el usuario realiza la operación de arrastrar en la imagen ampliada |
diapositiva |
Muestra cuándo el usuario realiza el intercambio de imágenes mediante el gesto de diapositiva |
Ejemplo: tener diferentes cursores del ratón para cada tipo de estado del componente.
.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;
}