調色板

色票由一行縮圖影像組成，左側和右側有可選的捲動按鈕。 只有當所有縮圖無法符合容器寬度時，捲動按鈕才會顯示在案頭上。 在行動裝置上，或如果縮圖可符合容器寬度，則不會顯示捲動按鈕。

.s7zoomviewer .s7swatches

主查看器區域的CSS屬性

使用以下CSS類選擇器控制色板容器的外觀：

.s7zoomviewer .s7zoomresetbutton

CSS屬性

說明

width

色票寬度。

height

色票高度。

底部

垂直色票相對於檢視器容器偏移。

範例：將色票設定為460 x 100像素。

.s7zoomviewer .s7swatches {
 width: 460px;
 height: 100px;
}

使用以下CSS類選擇器控制色板縮略圖之間的間距：

.s7zoomviewer .s7swatches .s7thumbcell

CSS屬性

說明

margin

每個縮圖周圍的水準和垂直邊界的大小。 實際縮圖間距等於為設定的左邊距和右邊距的總和 .s7thumbcell .

範例

要將間距設定為垂直和水準的10個像素。

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

個別縮圖的外觀由下列CSS類別選取器控制：

.s7zoomviewer .s7swatches .s7thumb

CSS屬性

說明

寬度

縮圖寬度。

高度

縮圖的高度。

border

縮圖的邊框。

注意

縮圖支援 state 屬性選取器，可用來將不同外觀套用至不同的縮圖狀態。 特別是， state="selected" 對應於當前顯示在主視圖中的影像的縮略圖， state="default" 與其餘的縮圖對應，和 state="over" 用於滑鼠暫留。

範例 — 若要設定縮圖，縮圖為56 x 56像素、有淺灰色預設邊框和深灰色選取的邊框。

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

左和右捲動按鈕的外觀由下列CSS類選擇器控制：

.s7zoomviewer .s7swatches .s7scrollleftbutton

.s7zoomviewer .s7swatches .s7scrollrightbutton

無法使用CSS的上、左、下和右屬性來定位捲動按鈕。 檢視器邏輯會自動定位。

CSS屬性

說明

寬度

捲動按鈕的寬度。

高度

捲動按鈕的高度。

背景 — 影像

針對指定按鈕狀態顯示的影像。

背景位置

如果使用CSS精靈，則位於圖稿精靈內。

請參閱 CSS Sprite .

注意

此按鈕支援 state 屬性選取器，可用來將不同外觀套用至不同按鈕狀態： up, down, over，和 disabled.

按鈕工具提示可翻譯。 請參閱 用戶介面元素本地化.

示例 — 設定56 x 56像素的捲動按鈕，每個狀態的圖稿都不同。

.s7zoomviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}

本頁內容