设置指示器 set-indicator

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

开发人员
用户

设置指示器是呈现在查看器底部的一系列点。它显示集合中的当前位置。

设置指示器的CSS属性

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

.s7carouselviewer .s7setindicator

CSS属性

说明

背景色

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

NOTE

设置指示器支持模式属性选择器，您可以使用它来为点状和数字操作模式应用不同的样式。特别是，mode="numeric"对应于数值操作模式；mode="dotted"对应于默认点状态。

例如，假设您要设置一个具有白色背景的设置指示器：

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

单个设置指示符点的外观由CSS类选择器控制。它适用于点状和数字运算模式下的项目。

.s7carouselviewer .s7setindicator .s7dot

CSS属性

说明

宽度

设置指示器点的宽度。

高度

设置指示器点的高度。

左边距

左边距（像素）。

上边距

上边距（像素）。

右边距

以像素为单位的右边距。

下边距

下边距（像素）。

边框半径

边框半径（像素）。

背景色

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

字体系列

字体名称。

字体大小

字体大小。

颜色

字体的颜色。

垂直对齐

横幅索引的垂直对齐方式。

行高

横幅索引的文本高度。

NOTE

设置指标项支持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;
}

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8