Imposta indicatore

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.

NOTA

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;
}

In questa pagina