設定指標 set-indicator

Last update: Mon Jul 22 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個畫素的圓角。點之間的間距是五個畫素。

.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