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