设置指示器

设置指示器是在触控设备上使用查看器时,在主色板上呈现的一系列点。 当滚动按钮不可用时,这些圆点图可帮助用户在缩略图的页面中导航。

设置指示器的CSS属性

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

.s7mixedmediaviewer .s7setindicator

CSS属性

说明

背景颜色

以十六进制格式表示的设置指示器的背景颜色。

示例 — 要设置带白色背景的设置指示器:

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

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

.s7mixedmediaviewer .s7setindicator .s7dot

CSS属性

说明

width

设置指示器点的宽度。

height

设置指示器点的高度。

边距 — 左

左边距(以像素为单位)。

边距 — 顶部

上边距(以像素为单位)。

边距右侧

右边距(以像素为单位)。

边距 — 底部

下边距(以像素为单位)。

边框半径

边框半径(以像素为单位)。

背景颜色

以十六进制格式表示的背景颜色。

注意

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

示例 — 将指示器点设置为15 x 15像素,其中包含两个像素水平边距、五个像素顶边距、一个像素底边距、十二个像素半径、默#D5D3D3颜色和#939393活动颜色:

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

在此页面上