調色板 swatches

Last update: Sat Nov 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
Dynamic Media Classic,Viewers,SDK/API,Flyout

建立對象：

Developer
User

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

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

色票的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屬性

說明

width

縮圖色票的寬度。

height

縮圖色票的高度。

border

縮圖色票的邊框。

NOTE

縮圖支援 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屬性

說明

width

捲動按鈕的寬度。

height

捲動按鈕的高度。

background-image

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

background-position

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

另請參閱 CSS精靈.

NOTE

此按鈕支援 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);
}

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8