Definir indicador

El indicador de conjunto es una serie de puntos representados sobre las muestras principales cuando se utiliza un visor en un dispositivo táctil. Los puntos ayudan a los usuarios a navegar por las páginas de miniaturas cuando los botones de desplazamiento no están disponibles.

Propiedades CSS del indicador de conjunto

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

.s7mixedmediaviewer .s7setindicator

CSS, propiedad

Descripción

background-color

Color de fondo en formato hexadecimal del indicador establecido.

Ejemplo: para crear un indicador de conjunto con un fondo blanco:

.s7mixedmediaviewer .s7setindicator {
 background-color: #FFFFFF;
}

El aspecto de un punto indicador de conjunto individual se controla con el selector de clase CSS:

.s7mixedmediaviewer .s7setindicator .s7dot

CSS, propiedad

Descripción

width

Anchura del punto indicador definido.

height

Altura del punto indicador definido.

margin-left

Margen izquierdo en píxeles.

margin-top

Margen superior en píxeles.

margin-right

Margen derecho en píxeles.

margin-bottom

Margen inferior en píxeles.

border-radius

Radio del borde en píxeles.

background-color

Color de fondo en formato hexadecimal.

NOTA

El punto indicador definido admite la variable state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de miniaturas. En particular, state="selected" corresponde a la página actual de miniaturas, state="unselected" corresponde al estado de punto predeterminado.

Ejemplo: para crear un punto indicador definido que sea 15 x 15 píxeles, con un margen horizontal de dos píxeles, un margen superior de cinco píxeles, un margen inferior de un píxel, un radio de 12 píxeles, el color predeterminado #D5D3D3 y el color activo #939393:

.s7mixedmediaviewer .s7setindicator .s7dot {
 width:15px;
 height:15px;
 margin-left:2px;
 margin-top:5px;
 margin-right:2px;
 margin-bottom:1px;
 border-radius:12px;
 background-color:#D5D3D3;
}
.s7mixedmediaviewer .s7setindicator .s7dot[state="selected"] {
 background-color:#939393;
}

En esta página