調色板

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

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

色票的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 topleftbottomright屬性來定位捲動按鈕。 檢視器邏輯會自動將它們定位。

CSS屬性

說明

寬度

捲動按鈕的寬度。

高度

捲動按鈕的高度。

背景影像

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

背景位置

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

請參閱 CSS精靈

注意

此按鈕支援state屬性選擇器,用於將不同的外觀套用至按鈕狀態updownoverdisabled

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

範例——若要設定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); 
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now