設定指標是在檢視器底部轉譯的一系列點。 它顯示集內的當前位置。
設定指標的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;
}