Campioni

I campioni sono costituiti da una riga di miniature con pulsanti di scorrimento opzionali a sinistra e a destra.

I pulsanti di scorrimento sono visibili sul desktop solo se tutte le miniature non possono adattarsi alla larghezza del contenitore. Sui dispositivi mobili, o se le miniature possono adattarsi alla larghezza del contenitore, i pulsanti di scorrimento non vengono visualizzati.

Proprietà CSS dei campioni

L’aspetto del contenitore di campioni è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7swatches

Esempio: per impostare i campioni su 460 x 100 pixel:

.s7flyoutviewer .s7swatches {
 width: 460px;
 height: 100px;
}

Proprietà CSS della spaziatura dei campioni di miniatura

La spaziatura tra le miniature dei campioni viene controllata con il selettore di classe CSS:

.s7flyoutviewer .s7swatches .s7thumbcell

Esempio: per impostare la spaziatura su un valore di dieci pixel sia verticalmente che orizzontalmente:

.s7flyoutviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

Proprietà CSS dei campioni miniatura

L’aspetto della singola miniatura è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7swatches .s7thumb

Esempio : per impostare miniature con 56 x 56 pixel, sono disponibili un bordo grigio chiaro predefinito e un bordo grigio scuro selezionato:

.s7flyoutviewer .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7flyoutviewer .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

Proprietà CSS dei pulsanti di scorrimento a sinistra e a destra

L’aspetto dei pulsanti di scorrimento a sinistra e a destra è controllato con i seguenti selettori di classe CSS:

.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando CSS top, left, bottome right proprietà. Al contrario, la logica del visualizzatore li posiziona automaticamente.

Le descrizioni dei pulsanti possono essere localizzate. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare pulsanti di scorrimento con 56 x 56 pixel e immagini diverse per ogni stato:

.s7flyoutviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}