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
Esempio - per impostare i campioni a 460 x 100 pixel:
.s7flyoutviewer .s7swatches {
width: 460px;
height: 100px;
}
Proprietà CSS della miniatura campione della spaziatura
La spaziatura tra campione miniature è controllata dalla classe CSS selettore:
.s7flyoutviewer .s7swatches .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
state selettore, che viene utilizzato per applicare interfacce diverse a diversi stati di miniatura. In particolare, state="selected" corrisponde alla miniatura per l'immagine che viene attualmente visualizzata nella vista principale, state="default" corrisponde al resto delle miniature e state="over" viene utilizzata 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 con i seguenti selettori di classe CSS:
.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton
Non è possibile posizionare i pulsanti di scorrimento utilizzando CSS top, left, bottom, e right proprietà. Al contrario, la logica visualizzatore li posiziona automaticamente.
Posizione all'interno dello sprite dell'illustrazione, se vengono utilizzati sprite CSS.
Vedere CSS Sprite.
state selettore, utilizzato per applicare interfacce diverse a stati pulsante up, down, overe disabled.I suggerimenti pulsante strumento possono essere localizzati. Per ulteriori informazioni, consulta Localizzazione di utente elementi dell'interfaccia.
Esempio - per impostare pulsanti di scorrimento di 56 x 56 pixel e 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);
}