Vista de la página

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); 
}
NOTA

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; 
}

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free