Imposta indicatore set-indicator

Imposta indicatore è una serie di punti di cui viene eseguito il rendering sopra i campioni quando un visualizzatore viene utilizzato su un dispositivo touch. I punti consentono agli utenti di spostarsi tra le pagine delle miniature quando i pulsanti di scorrimento non sono disponibili.

Proprietà CSS dell'indicatore di set

L’aspetto del contenitore di indicatori impostato è controllato dal seguente selettore di classe CSS:

.s7zoomviewer .s7setindicator
Proprietà CSS
Descrizione
background-color
Colore di sfondo in formato esadecimale dell'indicatore impostato.

Esempio - Per creare un indicatore impostato con uno sfondo bianco:

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

L’aspetto di un singolo punto indicatore di set è controllato con il selettore di classe CSS:

.s7zoomviewer .s7setindicator .s7dot

Proprietà CSS
Descrizione
width
Larghezza dell'indicatore impostato punto.
height
Altezza del punto indicatore impostato.
margin-left
Margine sinistro in pixel.
margin-top
Margine superiore in pixel.
margine destro
Margine destro in pixel.
margin-bottom
Margine inferiore in pixel.
border-radius
Raggio del bordo in pixel.
background-color
Colore di sfondo in formato esadecimale.
NOTE
Il punto indicatore impostato supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare: state="selected" corrisponde alla pagina corrente delle miniature, state="unselected" corrisponde allo stato predefinito del punto.

Esempio - Per creare un punto indicatore impostato su 15 x 15 pixel, con 2 pixel di margine orizzontale, 5 pixel di margine superiore, 1 pixel di margine inferiore, 12 pixel di raggio, #D5D3D3 colore predefinito e #939393 colore attivo:

.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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8