調色板

色票由一列縮圖影像組成，左側和右側有選用的捲動按鈕。

如果所有縮圖都無法符合容器的寬度，捲動按鈕只會顯示在案頭上。 在行動裝置上，或如果縮圖可符合容器寬度，則不會顯示捲動按鈕。

色票的CSS屬性

使用下列CSS類別選取器來控制色票容器的外觀：

.s7flyoutviewer .s7swatches

CSS屬性

說明

width

色票的寬度。

height

色票的高度。

底部

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

示例——要將色票設定為460 x 100像素：

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

縮圖色票間距的CSS屬性

色票縮圖之間的間距由CSS類別選擇器控制：

.s7flyoutviewer .s7swatches .s7thumbcell

CSS屬性

說明

margin

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

示例——要將間距設定為垂直和水準10像素：

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

縮圖色票的CSS屬性

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

.s7flyoutviewer .s7swatches .s7thumb

CSS屬性

說明

寬度

縮圖色票的寬度。

高度

縮圖色票的高度。

border

縮圖色票的邊框。

注意

縮圖支援state屬性選擇器，用於將不同的外觀套用至不同的縮圖狀態。 尤其是，state="selected"對應於主視圖中當前顯示的影像的縮略圖，state="default"對應於其餘的縮略圖，而state="over"用於滑鼠懸停。

範例——若要設定56 x 56像素的縮圖，請使用淺灰色的預設邊框和深灰色的選取邊框：

.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屬性

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

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

無法使用CSS top、left、bottom和right屬性來定位捲動按鈕。 檢視器邏輯會自動將它們定位。

CSS屬性

說明

寬度

捲動按鈕的寬度。

高度

捲動按鈕的高度。

背景影像

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

背景位置

如果使用CSS精靈，請放在圖稿精靈內。

請參閱 CSS精靈。

注意

此按鈕支援state屬性選擇器，用於將不同的外觀套用至按鈕狀態up、down、over和disabled。

按鈕工具提示可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

範例——若要設定56 x 56像素且每種狀態有不同圖稿的捲動按鈕：

.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); 
}

本頁內容