Muestras

Las muestras constan de una fila de imágenes en miniatura con botones de desplazamiento opcionales en los lados izquierdo y derecho.

Los botones de desplazamiento solo están visibles en el escritorio si todas las miniaturas no se ajustan al ancho del contenedor. En los dispositivos móviles, o si las miniaturas pueden ajustarse al ancho del contenedor, no se muestran los botones de desplazamiento.

Propiedades CSS de las muestras

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

.s7flyoutviewer .s7swatches

CSS, propiedad

Descripción

width

Ancho de las muestras.

height

La altura de las muestras.

parte inferior

Las muestras verticales se desplazan en relación con el contenedor del visor.

Ejemplo: para configurar muestras a 460 x 100 píxeles:

.s7flyoutviewer .s7swatches { 
 width: 460px; 
 height: 100px;  
}

Propiedades CSS del espaciado de muestras de miniaturas

El espaciado entre las miniaturas de muestra se controla con el selector de clases CSS:

.s7flyoutviewer .s7swatches .s7thumbcell

CSS, propiedad

Descripción

margin

Tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado de miniaturas real es igual a la suma de los márgenes izquierdo y derecho establecidos para .s7thumbcell .

Ejemplo: para configurar el espaciado en 10 píxeles tanto vertical como horizontalmente:

.s7flyoutviewer .s7swatches .s7thumbcell { 
 margin: 5px; 
}

Propiedades CSS de las muestras de miniaturas

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

.s7flyoutviewer .s7swatches .s7thumb

CSS, propiedad

Descripción

width

Ancho de las muestras de miniaturas.

height

Altura de las muestras de miniaturas.

borde

Borde de las muestras de miniaturas.

NOTA

La miniatura admite el selector de atributos state, que se utiliza 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 56 x 56 píxeles, tenga un borde predeterminado de color gris claro y un borde seleccionado de color gris oscuro:

.s7flyoutviewer .s7swatches .s7thumb { 
 width: 56px; 
 height: 56px;  
} 
.s7flyoutviewer .s7swatches .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7flyoutviewer .s7swatches .s7thumb[state="selected"] { 
 border: 1px solid #666666; 
}

Propiedades CSS de los botones de desplazamiento izquierdo y derecho

El aspecto de los botones de desplazamiento izquierdo y derecho se controla con los siguientes selectores de clase CSS:

.s7flyoutviewer .s7swatches .s7scrollleftbutton 
.s7flyoutviewer .s7swatches .s7scrollrightbutton

No es posible colocar 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 de desplazamiento.

height

Altura del botón de desplazamiento.

background-image

Imagen que se muestra para un estado de botón determinado.

background-position

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

Consulte Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que se utiliza para aplicar diferentes apariencias a los estados de botón up, down, over y disabled.

La información del objeto de 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 56 x 56 píxeles y con diferentes ilustraciones para cada estado:

.s7flyoutviewer .s7swatches .s7scrollleftbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{ 
background-image:url(images/v2/ScrollLeftButton_up.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{ 
 background-image:url(images/v2/ScrollLeftButton_over.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{ 
 background-image:url(images/v2/ScrollLeftButton_down.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollLeftButton_disabled.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="up"]{ 
background-image:url(images/v2/ScrollRightButton_up.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="over"]{ 
 background-image:url(images/v2/ScrollRightButton_over.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="down"]{ 
 background-image:url(images/v2/ScrollRightButton_down.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollRightButton_disabled.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