Indicateur de définition
Créé pour :
- Développeur
- Utilisateur ou utilisatrice
L’indicateur Set est une série de points rendus au bas de la visionneuse. Elle affiche la position actuelle dans la visionneuse.
Propriétés CSS de l’indicateur défini
L’aspect du conteneur d’indicateur défini est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7carouselviewer .s7setindicator
| propriété CSS | Description |
|---|---|
| background-color | Couleur d’arrière-plan au format hexadécimal de l’indicateur défini. |
REMARQUEmode="numeric" correspond au mode d’opération numérique ; mode="dotted" correspond à l’état du point par défaut.Par exemple, supposons que vous souhaitiez configurer un indicateur défini avec un arrière-plan blanc :
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
L’aspect d’un point indicateur de définition individuel est contrôlé à l’aide du sélecteur de classe CSS. Elle s’applique aux éléments en mode d’opération en pointillé et numérique.
.s7carouselviewer .s7setindicator .s7dot
| propriété CSS | Description |
|---|---|
| width | Largeur du point d’indicateur défini. |
| height | Hauteur du point d’indicateur défini. |
| margin-left | Marge gauche en pixels. |
| margin-top | Marge supérieure en pixels. |
| margin-right | Marge droite en pixels. |
| margin-bottom | Marge inférieure en pixels. |
| border-radius | Rayon de la bordure en pixels. |
| background-color | Couleur d’arrière-plan au format hexadécimal. |
| font-family | Nom de la police. |
| font-size | Taille de la police. |
| color | Couleur de la police. |
| - Alignement vertical | Alignement vertical de l’index de bannière. |
| line-height | Hauteur de texte de l’index de bannière. |
REMARQUEstate, qui peut être utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected" correspond à l’élément actif dans l’ensemble ; state="unselected" correspond à l’état de l’élément par défaut.Par exemple, supposons que vous souhaitiez configurer un indicateur défini en mode pointillé pour les systèmes de bureau. Vous souhaitez qu’il soit positionné à 20 pixels du bas de la visionneuse. De plus, vous souhaitez que les points non sélectionnés soient noirs avec une transparence de 50 %, 15 x 15 pixels avec sept coins arrondis. Les points sélectionnés sont noirs avec une transparence de 90 %, 18 x 18 pixels avec neuf pixels aux coins arrondis. L’espacement entre les points est de cinq pixels.
.s7carouselviewer.s7mouseinput .s7setindicator {
bottom: 20px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{
width:15px;
height:15px;
margin-left:2.5px;
margin-right:2.5px;
margin-top:2.5px;
margin-bottom:2.5px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {
width:18px;
height:18px;
background-color: #000000;
opacity: 0.9;
border-radius:9px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {
width:15px;
height:15px;
background-color: #000000;
opacity: 0.5;
border-radius:7px;
}