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 del visor principal
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 selector de atributos cursortype
que se puede aplicar a la clase .s7pageview
y controla el tipo del cursor en función del estado del componente y la acción del usuario. Se admiten los siguientes valores cursortype
:
Valor |
Descripción |
---|---|
predeterminado |
Se muestra cuando la imagen no se puede ampliar debido a una resolución de imagen pequeña, a la configuración de componentes o a ambos. |
zoomina |
Se muestra cuando se puede ampliar la imagen. |
restablecer |
Se muestra cuando la imagen está en el nivel máximo de zoom y se puede restablecer al estado inicial. |
arrastrar |
Se muestra cuando el usuario recorre la imagen que está en estado de zoom. |
slide |
Se muestra cuando el usuario realiza un intercambio de imágenes realizando un barrido horizontal o un gesto de gesto. |
El divisor de páginas que separa visualmente las páginas izquierda y derecha del pliego de catálogos se controla con el siguiente selector de clases CSS:
.s7ecatalogviewer .s7pageview .s7pagedivider
CSS, propiedad |
Descripción |
---|---|
width |
Ancho del divisor de páginas. Establezca 0 px para ocultar completamente el divisor. |
background-image |
La imagen que desea utilizar como divisor de página. |
Ejemplo: para tener un separador 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 el modificador frametransition
se establece en turn
o auto
(en sistemas de escritorio), el aspecto del divisor de página se controla con el modificador pageturnstyle
y se omite la clase CSS .s7pagedivider
.
Es posible configurar la visualización de los cursores personalizados del ratón sobre el área del visor principal. Esto se controla con los selectores de atributos adicionales aplicados a la clase CSS .s7ecatalogviewer .s7pageview
:
CSS, propiedad |
Descripción |
---|---|
predeterminado |
Normalmente, se muestra una flecha para una imagen que no se puede ampliar. |
zoomina |
Muestra cuándo se puede ampliar una imagen. |
restablecer |
Muestra cuándo una imagen tiene el zoom máximo y se puede restablecer. |
arrastrar |
Muestra cuándo el usuario realiza la operación de arrastrar en la imagen ampliada |
slide |
Muestra cuándo el usuario realiza el intercambio de imágenes mediante gestos de diapositiva |
Ejemplo: tiene diferentes cursores de 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;
}