设置指示器

最近更新： 2024年7月20日

主题：

创建对象：

开发人员
用户

设置指示器是指在触摸设备上使用查看器时，在样本上方呈现的一系列点。当滚动按钮不可用时，圆点可帮助用户浏览缩略图页面。

设置指示器的 CSS属性

使用以下CSS类选择器控制设置指示器容器的外观：

.s7zoomviewer .s7setindicator

CSS属性	说明
背景色	设置指示器的十六进制格式的背景颜色。

示例 — 创建具有白色背景的设置指示器：

.s7zoomviewer .s7setindicator {
 background-color: #FFFFFF;
}

单个设置指示符点的外观由CSS类选择器控制：

.s7zoomviewer .s7setindicator .s7dot

CSS属性	说明
宽度	设置指示器点的宽度。
高度	设置指示器点的高度。
左边距	左边距（像素）。
上边距	上边距（像素）。
右边距	以像素为单位的右边距。
下边距	下边距（像素）。
边框半径	边框半径（像素）。
背景色	以十六进制格式表示的背景颜色。

NOTE

设置指示符点支持state属性选择器，该选择器可用于将不同的外观应用于不同的缩略图状态。特别是，state="selected"对应于当前缩略图页面，state="unselected"对应于默认点状态。

示例 — 要将设置指示器点创建为15 x 15像素，其中2像素水平边距、5像素上边距、1像素下边距、12像素半径、#D5D3D3种默认颜色和#939393种活动颜色：

.s7zoomviewer .s7setindicator .s7dot {
 width:15px;
 height:15px;
 margin-left:2px;
 margin-top:5px;
 margin-right:2px;
 margin-bottom:1px;
 border-radius:12px;
 background-color:#D5D3D3;
}
.s7zoomviewer .s7setindicator .s7dot[state="selected"] {
 background-color:#939393;
}

recommendation-more-help