色票 color-swatches

色票是由一列縮圖影像所組成,其左側和右側都有選用的捲動按鈕。 只有在所有縮圖不符合容器寬度時,才會在案頭上顯示色票。 在行動裝置上,或縮圖可符合容器寬度時,捲動按鈕不會顯示。

色票容器的外觀是由CSS類別選取器所控制:

.s7mixedmediaviewer .s7colorswatches .s7swatches

色票的CSS屬性

width
色票的寬度。
height
色票的高度。
底部
相對於檢視器容器的垂直色票位移。

範例 — 設定高度為100畫素的色票。

.s7mixedmediviewer .s7colorswatches .s7swatches {
 height: 100px;
}

色票縮圖之間的間距由下列CSS類別選取器控制:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

CSS屬性
說明
margin
每個縮圖周圍水平與垂直邊界的大小。 實際縮圖間距等於為設定的左右邊界總和 .s7thumbcell .

範例

將間距設定為垂直和水平十個畫素。

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

個別縮圖的外觀可透過下列CSS類別選取器來控制:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

CSS屬性
說明
width
縮圖的寬度。
height
縮圖的高度。
border
縮圖的邊框。
NOTE
縮圖支援 state 屬性選取器,可將不同的外觀元素套用至不同的縮圖狀態。 尤其是, state="selected" 與目前顯示在主檢視中的影像縮圖相對應, state="default" 對應至其餘的縮圖,以及 state="over" 用於滑鼠懸停時。

範例 — 設定56 x 56畫素、淺灰色預設邊框和深灰色選取邊框的縮圖。

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7mixedviewer .s7colorswatches .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

左右捲動按鈕的外觀由下列CSS類別選取器控制:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

無法使用CSS來定位捲動按鈕 topleftbottom、和 right 屬性。 相反地,檢視器邏輯會自動調整位置。

CSS屬性
說明
width
捲動按鈕的寬度。
height
捲動按鈕的高度。
background-image
針對指定按鈕狀態顯示的影像。
background-position

若使用CSS拼寫,則定位在圖稿sprite內。

另請參閱 CSS精靈.

NOTE
此按鈕支援 state 屬性選取器,可將不同的外觀元素套用至不同的按鈕狀態: updownover、和 disabled.

範例 — 設定56 x 56畫素的捲動按鈕,每個狀態都有不同的圖稿。

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8