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 10 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 le proprietà CSS top, left, bottom e right. Al contrario, la logica del visualizzatore li posiziona automaticamente.

Le descrizioni dei pulsanti possono essere localizzate. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

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