Campioni swatches

I campioni sono costituiti da una riga di miniature con pulsanti di scorrimento opzionali sul lato sinistro e destro.

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

Proprietà CSS dei campioni

L’aspetto del contenitore dei campioni è controllato dal seguente selettore di classe CSS:

.s7flyoutviewer .s7swatches
Proprietà CSS
Descrizione
larghezza
Larghezza dei campioni.
altezza
Altezza dei campioni.
in basso
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 campioni miniature

La spaziatura tra le miniature dei campioni è 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 dei margini sinistro e destro impostati per .s7thumbcell .

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

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

Proprietà CSS dei campioni di miniature

L’aspetto di una singola miniatura viene controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7swatches .s7thumb
Proprietà CSS
Descrizione
larghezza
Larghezza dei campioni di miniature.
altezza
Altezza dei campioni di miniature.
bordo
Bordo dei campioni di miniature.
NOTE
La miniatura supporta il selettore di attributi state, utilizzato per applicare interfacce diverse a stati di miniatura diversi. In particolare, state="selected" corrisponde alla miniatura dell'immagine attualmente visualizzata nella visualizzazione principale, state="default" corrisponde al resto delle miniature e state="over" viene utilizzato al passaggio del mouse.

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

.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 sinistro e destro

L’aspetto dei pulsanti di scorrimento sinistro e destro è controllato dai seguenti selettori di classi CSS:

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

Impossibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right. Al contrario, la logica di visualizzazione 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.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedere sprite CSS.

NOTE
Questo pulsante supporta il selettore di attributi state, utilizzato per applicare interfacce diverse agli stati dei pulsanti up, down, over e disabled.

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

Esempio - per impostare pulsanti di scorrimento di 56 x 56 pixel con grafica diversa 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8