主要色票 main-swatches

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員
使用者

主要色票包含一列縮圖影像，其左右兩側各有選用的捲動按鈕。只有當所有縮圖無法符合容器的寬度時，才會在案頭上顯示捲動按鈕。在行動裝置上，或縮圖可符合容器寬度時，捲動按鈕不會顯示。

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

.s7mixedmediaviewer .s7swatches

色票的 CSS屬性

高度

色票的高度。

後

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

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

.s7mixedmediviewer .s7swatches {
 height: 100px;
}

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

.s7mixedmediaviewer .s7swatches .s7thumbcell

CSS屬性

說明

利潤

每個縮圖周圍水平與垂直邊界的大小。實際縮圖間距等於 .s7縮圖儲存格的左右邊界總和。

範例

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

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

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

.s7mixedmediaviewer .s7swatches .s7thumb

CSS屬性

說明

寬度

縮圖的寬度。

高度

縮圖的高度。

邊框

縮圖的邊框。

NOTE

縮圖支援state屬性選取器，可用來將不同的外觀元素套用至不同的縮圖狀態。特別是，state="selected"對應於目前顯示在主檢視中的影像縮圖，state="default"對應於其餘的縮圖，而state="over"則用於滑鼠懸停時。

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

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

資產的型別會顯示為覆蓋在縮圖影像上方的圖示，並可使用下列CSS類別選取器控制：

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

CSS屬性

說明

寬度

圖示覆蓋的寬度。

高度

圖示覆蓋的高度。

覆蓋支援type屬性選擇器，其可能的值如下： image （適用於單一影像）、swatchset （適用於色票集）、spinset （適用於迴轉集）及video （適用於單一視訊或自我調整視訊集）。

範例 — 若要設定迴轉集、色票集和視訊的圖示覆蓋：

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
 background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
 background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
 background-image: url(images/v2/ThumbOverlayVideo.png);
}

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

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

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

CSS屬性

說明

寬度

捲動按鈕的寬度。

高度

捲動按鈕的高度。

背景影像

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

背景位置

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

請參閱 CSS Sprite。

NOTE

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

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

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

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

recommendation-more-help

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