Muestras swatches
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 caben en la anchura del contenedor. En dispositivos móviles, o si las miniaturas pueden ajustarse a la anchura 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
Ejemplo: para configurar muestras de 460 x 100 píxeles:
.s7flyoutviewer .s7swatches {
width: 460px;
height: 100px;
}
Propiedades CSS del espaciado de muestra de miniatura
El espaciado entre las miniaturas de muestra se controla con el selector de clases CSS:
.s7flyoutviewer .s7swatches .s7thumbcell
Ejemplo: para configurar el espaciado para que sea de diez píxeles vertical y 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
state, que se usa 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 las miniaturas y state="over" se utiliza al pasar el ratón por encima.Ejemplo: para configurar miniaturas de 56 x 56 píxeles, con un borde predeterminado de gris claro y un borde seleccionado de 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 con las propiedades CSS top, left, bottom y right. En su lugar, la lógica del visor los coloca automáticamente.
Coloque dentro del icono de ilustración si se utilizan iconos CSS.
Ver Sprites CSS.
state, que se usa para aplicar distintas máscaras a los estados de los botones up, down, over y disabled.La información sobre herramientas de los botones 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 56 x 56 píxeles con ilustraciones diferentes 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);
}