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

Proprietà CSS

Descrizione

width

Larghezza dei campioni.

height

Altezza dei campioni.

bottom

L’offset dei campioni verticali rispetto al contenitore del visualizzatore.

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

Proprietà CSS

Descrizione

margine

Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma del margine sinistro e destro impostato per .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

Proprietà CSS

Descrizione

larghezza

Larghezza dei campioni delle miniature.

altezza

Altezza dei campioni delle miniature.

border

Il bordo dei campioni delle miniature.

NOTA

La miniatura supporta state selettore di attributi, che viene utilizzato per applicare skin diversi a diversi stati di miniatura. In particolare, state="selected" corrisponde alla miniatura dell’immagine attualmente visualizzata nella vista principale, state="default" corrisponde al resto delle miniature, e state="over" viene utilizzato al passaggio del mouse.

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.

Proprietà CSS

Descrizione

larghezza

Larghezza del pulsante di scorrimento.

altezza

Altezza del pulsante di scorrimento.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi Sprite CSS .

NOTA

Questo pulsante supporta state selettore di attributi, che viene utilizzato per applicare interfacce diverse agli stati del pulsante up, down, overe disabled.

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

In questa pagina