Färgrutor swatches
Färgrutor består av en rad med miniatyrbilder med rullningsknappar till vänster och till höger.
Rullningsknappar visas bara på skrivbordet om alla miniatyrer inte får plats i behållarens bredd. På mobila enheter, eller om miniatyrbilder får plats i behållarbredden, visas inte rullningsknappar.
CSS-egenskaper för färgrutorna
Utseendet på färgrutebehållaren styrs med följande CSS-klassväljare:
.s7flyoutviewer .s7swatches
Exempel - för att ställa in färgrutor till 460 x 100 pixlar:
.s7flyoutviewer .s7swatches {
width: 460px;
height: 100px;
}
CSS-egenskaper för mellanrum för miniatyrfärgrutor
Avståndet mellan miniatyrbilder av färgrutor styrs med CSS-klassväljaren:
.s7flyoutviewer .s7swatches .s7thumbcell
Exempel - om du vill ange mellanrum som är tio pixlar både lodrätt och vågrätt:
.s7flyoutviewer .s7swatches .s7thumbcell {
margin: 5px;
}
CSS-egenskaper för miniatyrbildsrutorna
Utseendet på enskilda miniatyrbilder styrs med följande CSS-klassväljare:
.s7flyoutviewer .s7swatches .s7thumb
state, som används för att tillämpa olika skal på olika miniatyrlägen. I synnerhet motsvarar state="selected" miniatyrbilden för den bild som visas i huvudvyn, state="default" motsvarar resten av miniatyrbilderna och state="over" används vid hovring med musen.Exempel - Om du vill ställa in miniatyrbilder som är 56 x 56 pixlar har du en ljusgrå standardkant och en mörkgrå markerad kant:
.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;
}
CSS-egenskaper för vänster och höger rullningsknapp
Utseendet på vänster och höger rullningsknapp styrs av följande CSS-klassväljare:
.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton
Det går inte att placera rullningsknappar med CSS-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.
Placera inuti en teckningssprite, om CSS-sprites används.
Se CSS-fragment.
state som används för att tillämpa olika skal på knapplägena up, down, over och disabled.Knappens tips kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
Exempel - för att ställa in rullningsknappar som är 56 x 56 pixlar och har olika teckningar för varje läge:
.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);
}