设置指示器是在查看器底部呈现的一系列点。 它显示集内的当前位置。
设置指示器的CSS属性
使用以下CSS类选择器控制设置指示器容器的外观:
.s7carouselviewer .s7setindicator
CSS属性 |
说明 |
---|---|
背景颜色 |
以十六进制格式表示的设置指示器的背景颜色。 |
设置指示器支持模式属性选择器,您可以使用该选择器对点线和数字操作模式应用不同的样式。 具体而言,mode="numeric"
对应于数字操作模式;mode="dotted"
对应于默认的点状态。
例如,假设您要设置一个具有白色背景的设置指示器:
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
单个设置指示器点的外观由CSS类选择器控制。 它适用于点线和数字操作模式下的项目。
.s7carouselviewer .s7setindicator .s7dot
CSS属性 |
说明 |
---|---|
width |
设置指示器点的宽度。 |
height |
设置指示器点的高度。 |
边距 — 左 |
左边距(以像素为单位)。 |
边距 — 顶部 |
上边距(以像素为单位)。 |
边距右侧 |
右边距(以像素为单位)。 |
边距 — 底部 |
下边距(以像素为单位)。 |
边框半径 |
边框半径(以像素为单位)。 |
背景颜色 |
以十六进制格式表示的背景颜色。 |
字体系列 |
字体名称。 |
字体大小 |
字体大小。 |
color |
字体的颜色。 |
垂直对齐 |
横幅索引的垂直对齐方式。 |
行高 |
横幅索引的文本高度。 |
设置指示器项支持state
属性选择器,该选择器可用于将不同的外观应用到不同的缩略图状态。 其中,state="selected"
对应于集合中的当前元素;state="unselected"
对应于默认项目状态。
例如,假定您要在虚线模式下为桌面系统设置一个设置指示器。 您希望距查看器底部20像素的位置。 此外,您还希望未选择的点为黑色,且其透明度为50%,为15 x 15像素,且其圆角为7像素。 选定的点是黑色的,透明度为90%,18 x 18像素,圆角为9像素。 点之间的间距是5个像素。
.s7carouselviewer.s7mouseinput .s7setindicator {
bottom: 20px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{
width:15px;
height:15px;
margin-left:2.5px;
margin-right:2.5px;
margin-top:2.5px;
margin-bottom:2.5px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {
width:18px;
height:18px;
background-color: #000000;
opacity: 0.9;
border-radius:9px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {
width:15px;
height:15px;
background-color: #000000;
opacity: 0.5;
border-radius:7px;
}