Imposta indicatore

L’indicatore set è una serie di punti sottoposti a rendering sui 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 set

L’aspetto del contenitore dell’indicatore set è controllato con il seguente selettore di classe CSS:

.s7zoomviewer .s7setindicator

Proprietà CSS

Descrizione

colore di sfondo

Colore di sfondo in formato esadecimale dell'indicatore set.

Esempio: per impostare un indicatore con sfondo bianco:

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

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

.s7zoomviewer .s7setindicator .s7dot

Proprietà CSS

Descrizione

width

Larghezza del punto dell'indicatore impostato.

height

Altezza del punto indicatore impostato.

margine sinistro

Margine sinistro in pixel.

margine superiore

Margine superiore in pixel.

margine destro

Margine destro in pixel.

margine inferiore

Margine inferiore in pixel.

raggio bordo

Raggio del bordo in pixel.

colore di sfondo

Colore di sfondo in formato esadecimale.

NOTA

Il punto indicatore impostato supporta il selettore di attributi state, che può essere utilizzato per applicare skin diversi a stati di miniatura diversi. In particolare, state="selected" corrisponde alla pagina corrente delle miniature, state="unselected" corrisponde allo stato predefinito del punto.

Esempio: per impostare un punto indicatore a 15 x 15 pixel, con due pixel di margine orizzontale, cinque pixel di margine superiore, un margine inferiore di un pixel, un raggio di dodici pixel, #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;  
}

In questa pagina