Indicateur de définition

Dernière mise à jour : 2021-09-15
  • Créé pour :
  • Developer
    User

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 set

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

arrière-plan-couleur

Couleur d’arrière-plan au format hexadécimal de l’indicateur défini.

REMARQUE

L’indicateur Set prend en charge le sélecteur d’attributs de mode, que vous pouvez utiliser pour appliquer différents styles aux modes d’opération pointillés et numériques. mode="numeric" correspond notamment au mode de fonctionnement 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.

arrière-plan-couleur

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.

REMARQUE

Les éléments d’indicateur de définition prennent 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 à 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 à partir 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;
}
Page précédente
Next page

Sur cette page