設定指示器

設定指標是在檢視器底部轉譯的一系列點。 它顯示集內的當前位置。

設定指標的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;
}

本頁內容