L’indicateur défini est une série de points affichés sur les nuances lorsqu’une visionneuse est utilisée sur un périphérique tactile. Les points aident les utilisateurs à parcourir les pages des miniatures lorsque les boutons de défilement ne sont pas disponibles.
Propriétés CSS de l’indicateur de définition
L’aspect du conteneur d’indicateur de définition est contrôlé par le sélecteur de classe CSS suivant :
.s7zoomviewer .s7setindicator
Propriété CSS |
Description |
---|---|
arrière-plan-couleur |
Couleur d’arrière-plan au format hexadécimal de l’indicateur défini. |
Exemple - pour définir un indicateur avec un arrière-plan blanc :
.s7zoomviewer .s7setindicator {
background-color: #FFFFFF;
}
L’aspect d’un point d’indicateur de paramètre individuel est contrôlé par le sélecteur de classe CSS :
.s7zoomviewer .s7setindicator .s7dot
Propriété CSS |
Description |
---|---|
width |
Largeur du point d’indicateur défini. |
height |
Hauteur du point indicateur défini. |
marge-gauche |
Marge gauche en pixels. |
margin-top |
Marge supérieure en pixels. |
marge droite |
Marge droite en pixels. |
margin-bottom |
Marge inférieure en pixels. |
border-radius |
Rayon de la bordure en pixels. |
arrière-plan-couleur |
Couleur d’arrière-plan au format hexadécimal. |
Le paramètre indicateur dot prend en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected"
correspond à la page actuelle des miniatures, state="unselected"
correspond à l’état du point par défaut.
Exemple : pour définir un point indicateur de 15 x 15 pixels, avec une marge horizontale de deux pixels, une marge supérieure de cinq pixels, une marge inférieure de un pixel, un rayon de douze pixels, la couleur par défaut #D5D3D3 et la couleur principale #939393 :
.s7zoomviewer .s7setindicator .s7dot {
width:15px;
height:15px;
margin-left:2px;
margin-top:5px;
margin-right:2px;
margin-bottom:1px;
border-radius:12px;
background-color:#D5D3D3;
}
.s7zoomviewer .s7setindicator .s7dot[state="selected"] {
background-color:#939393;
}