設定指示符

設定指示器是當檢視器用於觸控裝置時,在色票上方呈現的一系列點。 當捲動按鈕無法使用時,這些點可協助使用者瀏覽縮圖頁面。

set指示符的CSS屬性

使用下列CSS類別選擇器控制設定指標容器的外觀:

.s7zoomviewer .s7setindicator

CSS屬性

說明

背景色

設定指示符的十六進位格式的背景顏色。

示例——要設定具有白色背景的設定指示符:

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

使用CSS類別選擇器控制個別設定指標點的外觀:

.s7zoomviewer .s7setindicator .s7dot

CSS屬性

說明

width

設定指示器點的寬度。

height

設定指示點的高度。

左邊距

左邊界(以像素為單位)。

邊距頂端

上邊界(以像素為單位)。

邊界右側

右邊距(像素)。

邊距——底部

底部邊界(以像素為單位)。

邊框半徑

邊框半徑(像素)。

背景色

十六進位格式的背景顏色。

注意

設定指標點支援state屬性選擇器,可用來將不同的外觀套用至不同的縮圖狀態。 尤其是,state="selected"對應於目前的縮圖頁面,state="unselected"對應於預設點狀態。

範例——若要將設定的指標點設定為15 x 15像素,具有兩個像素水準邊界、五個像素頂邊界、一個像素底邊界、十二個像素半徑、#D5D3D3預設顏色和#9393作用中顏色:

.s7zoomviewer .s7setindicator .s7dot { 
 width:15px; 
 height:15px; 
 margin-left:2px; 
 margin-top:5px; 
 margin-right:2px; 
 margin-bottom:1px; 
 border-radius:12px; 
 background-color:#D5D3D3;  
} 
.s7zoomviewer .s7setindicator .s7dot[state="selected"] { 
 background-color:#939393;  
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now