Miniaturas

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 miniatura de la barra de control principal. Cuando las miniaturas están activas, se muestran en modo modal superpuesto en 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

CSS, propiedad

Descripción

parte superior

Desplazamiento vertical del contenedor de miniaturas desde la parte superior del visor.

margin-top

El margen superior.

margin-left

El margen izquierdo.

margin-right

El margen derecho.

margin-bottom

El margen inferior.

background-color

Color de fondo del área de miniaturas.

Ejemplo: para configurar las miniaturas de modo que tengan un desplazamiento de 32 píxeles desde la parte superior, 5 píxeles de márgenes a izquierda y derecha y 8 píxeles de margen 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

CSS, propiedad

Descripción

margin

El tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado de las miniaturas horizontales real es igual a la suma de los márgenes izquierdo y derecho que se establece para .s7thumbcell . El espaciado en miniatura vertical es igual a la suma de los márgenes superior e inferior.

Ejemplo: para establecer un espacio de 10 píxeles tanto vertical como horizontalmente.

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

CSS, propiedad

Descripción

width

Ancho de la miniatura.

height

Altura de la miniatura.

borde

El 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 se configura en caso de que decida dividir el catálogo en páginas individuales.

NOTA

La miniatura admite el selector de atributos state, que puede utilizarse para aplicar diferentes aspectos a diferentes estados de miniaturas. En concreto, 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.

Ejemplo: para configurar miniaturas de 120 x 85 píxeles, tenga 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

CSS, propiedad

Descripción

font-family

Nombre de la fuente.

font-size

Tamaño de fuente.

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

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

En caso de que haya más miniaturas de las que caben verticalmente en la vista, las miniaturas representarán la barra de desplazamiento vertical del lado derecho. El aspecto del área de la barra de desplazamiento se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

CSS, propiedad

Descripción

width

Ancho de la barra de desplazamiento.

parte superior

Desplazamiento vertical de la barra de desplazamiento desde la parte superior del área de miniaturas.

parte inferior

Desplazamiento vertical de la barra de desplazamiento desde la parte inferior del área de miniaturas.

derecha

Desplazamiento de la barra de desplazamiento horizontal desde el borde derecho del área de miniaturas.

Ejemplo: para configurar una barra de desplazamiento de 28 píxeles de ancho y con 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 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

CSS, propiedad

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 de 28 píxeles de ancho y con un fondo gris semitransparente.

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

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 del pulgar 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 clase CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS, propiedad

Descripción

width

Ancho de la barra de desplazamiento.

height

Altura de la miniatura de la barra de desplazamiento.

relleno superior

El margen vertical entre la parte superior de la barra de desplazamiento.

relleno inferior

El margen vertical entre la parte inferior de la barra de desplazamiento.

imagen de fondo

Imagen que se muestra para un estado de pulgar determinado.

posición de fondo

Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Thumb es compatible con el selector de atributos state, que puede utilizarse para aplicar diferentes aspectos a los estados de miembros up, down, over y disabled.

Ejemplo: para configurar un control de barra de desplazamiento de 28 x 45 píxeles, tiene 10 márgenes de píxeles en la parte superior e inferior y tiene distintas ilustraciones 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 utilizando las propiedades CSS top, left, bottom y right. En su lugar, la lógica del visor los coloca automáticamente.

CSS, propiedad

Descripción

width

Ancho del botón.

height

Altura del botón.

imagen de fondo

Imagen que se muestra para un estado de pulgar determinado.

posición de fondo

Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

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

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

Ejemplo: para configurar botones de desplazamiento de 28 x 32 píxeles y con diferentes ilustraciones 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); 
}

En esta página