L'indicatore set è una serie di punti sottoposti a rendering nella parte inferiore del visualizzatore. Mostra la posizione corrente all’interno del set.
Proprietà CSS dell’indicatore set
L’aspetto del contenitore dell’indicatore set è controllato con il seguente selettore di classe CSS:
.s7carouselviewer .s7setindicator
Proprietà CSS |
Descrizione |
---|---|
colore di sfondo |
Colore di sfondo in formato esadecimale dell'indicatore set. |
L'indicatore set supporta il selettore di attributi della modalità, che può essere utilizzato per applicare stili diversi per le modalità di funzionamento punteggiate e numeriche. In particolare, mode="numeric"
corrisponde alla modalità operativa numerica; mode="dotted"
corrisponde allo stato predefinito del punto.
Ad esempio, supponi di voler impostare un indicatore di set con sfondo bianco:
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
L’aspetto di un singolo punto indicatore del set è controllato con il selettore di classe CSS. Si applica agli elementi sia in modalità di funzionamento punteggiata che numerica.
.s7carouselviewer .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. |
font-family |
Nome del font. |
font-size |
Dimensione del font. |
color |
Colore del font. |
allineamento verticale |
Allineamento verticale dell'indice del banner. |
altezza riga |
Altezza del testo per l'indice del banner. |
Gli elementi degli indicatori impostati supportano il selettore di attributi state
, che può essere utilizzato per applicare skin diversi a diversi stati di miniatura. In particolare, state="selected"
corrisponde all’elemento corrente nel set; state="unselected"
corrisponde allo stato predefinito dell'elemento.
Ad esempio, si supponga di voler impostare un indicatore di set in modalità punteggiata per i sistemi desktop. Desideri che sia posizionato a 20 pixel dal fondo del visualizzatore. Inoltre, vuoi che i punti non selezionati siano neri con una trasparenza del 50%, 15 x 15 pixel con sette angoli arrotondati. I punti selezionati sono neri con trasparenza del 90%, 18 x 18 pixel con angoli arrotondati di nove pixel. Lo spazio tra i punti è di cinque pixel.
.s7carouselviewer.s7mouseinput .s7setindicator {
bottom: 20px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{
width:15px;
height:15px;
margin-left:2.5px;
margin-right:2.5px;
margin-top:2.5px;
margin-bottom:2.5px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {
width:18px;
height:18px;
background-color: #000000;
opacity: 0.9;
border-radius:9px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {
width:15px;
height:15px;
background-color: #000000;
opacity: 0.5;
border-radius:7px;
}