缩略图

缩略图由缩略图图像网格组成，右侧有一个可选的滚动条，允许垂直滚动。

单击主控制栏中的缩略图按钮可切换缩略图。 当缩略图处于活动状态时，它们将以覆盖在查看器用户界面顶部的模式显示。 查看器逻辑会自动将缩略图容器的大小调整到整个查看器区域。

通过以下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);
}