Miniaturas thumbnails

Las miniaturas constan de una cuadrícula de imágenes en miniatura con una barra de desplazamiento opcional en el lado derecho para permitir el desplazamiento vertical.

Las miniaturas se alternan haciendo clic en el botón de miniaturas de la barra de control principal. Cuando las miniaturas están activas, se muestran en modo modal superpuestas en la parte superior de la interfaz de usuario del visor. La lógica del visor cambia automáticamente el tamaño del contenedor de miniaturas a todo el área del visor.

El aspecto del contenedor de miniaturas se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview

Propiedad CSS
Descripción
parte superior
Desplazamiento vertical del contenedor de miniaturas desde la parte superior del visor.
margin-top
El margen superior.
margin-left
Margen izquierdo.
margin-right
El margen derecho.
margin-bottom
El margen inferior.
background-color
Color de fondo del área de miniaturas.

Ejemplo: configurar miniaturas para que tengan un desplazamiento de 32 píxeles desde la parte superior, márgenes de 5 píxeles a la izquierda y a la derecha y margen de 8 píxeles en la parte inferior, con 0xDDDDDD fondo.

.s7ecatalogsearchviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

El espaciado entre miniaturas se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

Propiedad CSS
Descripción
margin
El tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado horizontal real de las miniaturas es igual a la suma de los márgenes izquierdo y derecho establecidos para .s7thumbcell . El espaciado vertical de las miniaturas es igual a la suma de los márgenes superior e inferior.

Ejemplo: para definir un espacio de 10 píxeles vertical y horizontalmente.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

El aspecto de la miniatura individual se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

Propiedad CSS
Descripción
width
Ancho de la miniatura.
height
Altura de la miniatura.
borde
Borde de la miniatura.
background-color
Color de fondo de la miniatura.

En dispositivos táctiles, cuando se gira al modo vertical, el visor puede cambiar el tamaño de las miniaturas a la mitad de lo que está configurado en caso de que decida dividir el pliego del catálogo en páginas individuales.

NOTE
La miniatura admite state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de miniaturas. En particular, state="selected" corresponde a la miniatura de la imagen que se muestra actualmente en la vista principal, state="default" corresponde al resto de miniaturas, y state="over" se utiliza al pasar el ratón por encima.

Ejemplo: para configurar miniaturas de 120 x 85 píxeles, con un fondo blanco, un borde estándar gris claro y un borde seleccionado gris oscuro.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

El aspecto de la etiqueta de miniatura se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Propiedad CSS
Descripción
font-family
Nombre de la fuente.
font-size
Tamaño de fuente.

Ejemplo: para configurar etiquetas para utilizar la fuente Helvetica® de 14 píxeles.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

Si hay más miniaturas de las que caben verticalmente en la vista, las miniaturas representan la barra de desplazamiento vertical a la derecha. El aspecto del área de la barra de desplazamiento se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

Propiedad CSS
Descripción
width
Ancho de la barra de desplazamiento.
parte superior
Desplazamiento vertical de la barra desde la parte superior del área de miniaturas.
parte inferior
Desplazamiento vertical de la barra desde la parte inferior del área de miniaturas.
derecha
Desplazamiento horizontal de la barra desde el borde derecho del área de miniaturas.

Ejemplo: para configurar una barra de desplazamiento que tenga 28 píxeles de ancho y un margen de 8 píxeles desde la parte superior, derecha e inferior del área de miniaturas.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

La pista de la barra de desplazamiento es el área entre los botones de desplazamiento superior e inferior. El componente establece automáticamente la posición y la altura de la pista. El seguimiento se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propiedad CSS
Descripción
width
Ancho de la pista de la barra de desplazamiento.
background-color
Color de fondo de la pista de la barra de desplazamiento.

Ejemplo: para configurar una pista de barra de desplazamiento que tenga 28 píxeles de ancho y un fondo gris semitransparente.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

El pulgar de la barra de desplazamiento se mueve verticalmente dentro del área de la pista de desplazamiento. Su posición vertical está totalmente controlada por la lógica del componente; sin embargo, la altura de la miniatura no cambia dinámicamente según la cantidad de contenido. La altura de la miniatura y otros aspectos se controlan con el siguiente selector de clases CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propiedad CSS
Descripción
width
Ancho de la miniatura de la barra de desplazamiento.
height
Altura de la miniatura de la barra de desplazamiento.
relleno superior
Relleno vertical entre la parte superior de la pista de la barra de desplazamiento.
padding-bottom
Relleno vertical entre la parte inferior de la pista de la barra de desplazamiento.
background-image
Imagen que se muestra para un estado de miniatura determinado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
La miniatura admite state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a los estados de la miniatura up, down, over, y disabled.

Ejemplo: para configurar una miniatura de barra de desplazamiento de 28 x 45 píxeles, tiene márgenes de 10 píxeles en la parte superior e inferior y tiene ilustraciones diferentes para cada estado.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

El aspecto de los botones de desplazamiento superior e inferior se controla con los siguientes selectores de clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

No es posible colocar los botones de desplazamiento mediante CSS top, left, bottom, y right propiedades. En su lugar, la lógica del visor los coloca automáticamente.

Propiedad CSS
Descripción
width
Ancho del botón.
height
Altura del botón.
background-image
Imagen que se muestra para un estado de miniatura determinado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
Estos botones admiten el state selector de atributos, que se puede utilizar para aplicar distintos aspectos a los distintos estados de los botones up, down, over, y disabled.

La información del objeto del botón se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar botones de desplazamiento de 28 x 32 píxeles con ilustraciones diferentes para cada estado.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8