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 creare un indicatore impostato 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

Imposta il punto indicatore supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi a diversi stati di miniatura. 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 da 15 x 15 pixel, con un margine orizzontale di 2 pixel, un margine superiore di 5 pixel, un margine inferiore di 1 pixel, un raggio di 12 pixel, un colore predefinito #D5D3D3 e un colore attivo #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;
}

In questa pagina