縮圖

縮圖是由縮圖影像的格點所組成，其右側具有可選的卷軸，以允許垂直捲動。

按一下主控制列中的縮圖按鈕即可切換縮圖。 縮圖作用中時，會以模式模式模式顯示，並覆蓋在檢視器使用者介面的上方。 檢視器邏輯會自動將縮圖容器大小調整至整個檢視器區域。

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

.s7ecatalogviewer .s7thumbnailgridview

範例 — 將縮圖設定為距上側32畫素位移、左右側5畫素邊界、下側8畫素邊界，使用 0xDDDDDD 背景。

.s7ecatalogviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

範例 — 在垂直和水平設定10畫素空間。

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

在觸控裝置上，當旋轉至直向模式時，檢視器可能會將縮圖調整為已設定縮圖的一半，以防它決定將目錄分割為個別頁面。

範例 — 設定120 x 85畫素、白色背景、淺灰色標準邊框和深灰色選取邊框的縮圖。

.s7ecatalogviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

縮圖示籤的外觀是由下列CSS類別選取器所控制：

.s7ecatalogviewer .s7thumbnailgridview .s7label

範例 — 設定標籤以使用14畫素Helvetica®字型。

.s7ecatalogviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

如果縮圖數目超過垂直方向所能容納的量，縮圖會在右側呈現垂直卷軸。 卷軸區域的外觀是由下列CSS類別選取器所控制：

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

範例 — 設定寬度為28畫素的卷軸，且縮圖區域上下左右各有8畫素邊界。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

卷軸軌跡是上下捲動按鈕之間的區域。 元件會自動設定軌跡的位置和高度。 使用下列CSS類別選取器來控制追蹤：

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

範例 — 設定28畫素寬的卷軸軌跡，並具有半透明的灰色背景。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

卷軸縮圖在捲動軌跡區域內垂直移動。 其垂直位置完全由元件邏輯控制，但縮圖高度不會隨著內容量而動態變更。 您可以使用以下CSS類別選取器來控制縮圖高度和其他方面：

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

範例 — 設定28 x 45畫素的卷軸縮圖，其頂端和底部有10個畫素邊界，且每個狀態都有不同的圖稿。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

上下捲動按鈕的外觀是由下列CSS類別選取器所控制：

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}