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