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 en la barra de control principal. Cuando las miniaturas están activas, se muestran en modo modal superpuesto sobre la interfaz de usuario del visor. La lógica del visor cambia automáticamente el tamaño del contenedor de miniaturas a toda la zona 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

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 se desvíen 32 píxeles de la parte superior, 5 píxeles de márgenes a la izquierda y a la 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

Tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado de miniaturas horizontales real es igual a la suma del margen izquierdo y derecho definido para .s7thumbcell . El espaciado vertical en miniatura 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

Borde de la miniatura.

background-color

Color de fondo de la miniatura.

En dispositivos táctiles, cuando se rota 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 pliego de catálogos en páginas individuales.

NOTA

La miniatura admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos 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 las miniaturas y state="over" se utiliza al pasar el ratón.

Ejemplo: para configurar miniaturas de 120 x 85 píxeles, utilice un fondo blanco, un borde estándar de gris claro y un borde seleccionado de color 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 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 representan la barra de desplazamiento vertical en el 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 de la barra de desplazamiento vertical desde la parte superior del área de miniaturas.

parte inferior

Desplazamiento de la barra de desplazamiento vertical 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 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

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 con una anchura de 28 píxeles 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 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 del control de la barra de desplazamiento.

height

Altura de la miniatura de la barra de desplazamiento.

padding-top

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

relleno-inferior

El margen 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

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Thumb admite el selector de atributos state, que se puede utilizar para aplicar diferentes apariencias a los estados del pulgar up, down, over y disabled.

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

CSS, propiedad

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

Colocar 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 apariencias a los distintos estados de botones up, down, over y disabled.

La información de objeto 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

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