Imposta indicatore è una serie di punti di cui viene eseguito il rendering nella parte inferiore del visualizzatore. Mostra la posizione corrente all'interno del set.
Proprietà CSS dell'indicatore di set
L’aspetto del contenitore di indicatori impostato è controllato dal seguente selettore di classe CSS:
.s7carouselviewer .s7setindicator
Proprietà CSS |
Descrizione |
---|---|
background-color |
Colore di sfondo in formato esadecimale dell'indicatore impostato. |
L'indicatore Set supporta il selettore di attributi di modalità, che consente di applicare stili diversi per le modalità operative punteggiate e numeriche. In particolare: mode="numeric"
corrisponde alla modalità operativa numerica; mode="dotted"
corrisponde allo stato predefinito del punto.
Ad esempio, supponiamo che si desideri impostare un indicatore impostato con uno sfondo bianco:
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
L'aspetto di un singolo punto indicatore impostato viene controllato con il selettore di classe CSS. Si applica agli elementi sia in modalità operativa punteggiata che numerica.
.s7carouselviewer .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. |
font-family |
Nome del carattere. |
font-size |
Dimensione del carattere. |
color |
Colore del carattere. |
Allineamento verticale |
Allineamento verticale dell'indice del banner. |
line-height |
Altezza del testo per l'indice del banner. |
Le voci degli indicatori impostati supportano state
selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare: state="selected"
corrisponde all’elemento corrente dell’insieme; state="unselected"
corrisponde allo stato predefinito dell'elemento.
Si supponga, ad esempio, di voler impostare un indicatore impostato in modalità punteggiata per i sistemi desktop. Si desidera posizionarlo a 20 pixel dalla parte inferiore del visualizzatore. Si desidera inoltre che i punti non selezionati siano neri con trasparenza al 50%, 15 x 15 pixel con sette pixel e angoli arrotondati. I punti selezionati sono neri con trasparenza al 90%, 18 x 18 pixel con nove pixel angoli arrotondati. La spaziatura 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;
}