El indicador de conjunto es una serie de puntos procesados 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 establecido
El aspecto del contenedor del 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 configurar el indicador de configuración 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 |
Ancho del punto indicador establecido. |
height |
Altura del punto indicador establecido. |
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. |
El punto indicador de conjunto admite el selector de atributos state
, que se puede utilizar para aplicar diferentes apariencias 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 configurar un punto indicador definido de 15 x 15 píxeles, con dos píxeles de margen horizontal, cinco píxeles de margen superior, un píxel de margen inferior, doce píxeles de radio, #D5D3D3 color predeterminado y #939393 color activo:
.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;
}