세트 표시기는 터치 장치에서 뷰어를 사용할 때 색상 견본 위에 렌더링되는 일련의 점입니다. 스크롤 단추를 사용할 수 없을 때 축소판 페이지를 탐색하는 데 점이 도움이 됩니다.
설정된 표시기의 CSS 속성
설정된 표시기 컨테이너의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7zoomviewer .s7setindicator
CSS 속성 |
설명 |
---|---|
배경색 |
배경색(설정 표시기의 16진수 형식)입니다. |
예 - 흰색 배경을 사용하여 세트 표시기를 만들려면
.s7zoomviewer .s7setindicator {
background-color: #FFFFFF;
}
개별 세트 표시기 점의 모양은 CSS 클래스 선택기로 제어됩니다.
.s7zoomviewer .s7setindicator .s7dot
CSS 속성 |
설명 |
---|---|
width |
설정된 표시기 점의 너비입니다. |
height |
설정된 표시기 점의 높이입니다. |
왼쪽 여백 |
왼쪽 여백(픽셀 단위)입니다. |
여백 상단 |
위쪽 여백(픽셀 단위)입니다. |
순익 |
오른쪽 여백(픽셀 단위)입니다. |
여백 하단 |
아래쪽 여백(픽셀 단위)입니다. |
테두리 반경 |
테두리 반경(픽셀 단위). |
배경색 |
16진수 형식의 배경색입니다. |
표시기 점은 state
속성 선택기. 다른 스킨을 다른 축소판 상태에 적용하는 데 사용할 수 있습니다. 특히, state="selected"
축소판의 현재 페이지에 해당합니다. state="unselected"
는 기본 점 상태에 해당합니다.
예 - 세트 표시기 점을 15 x 15픽셀로 만들려면 두 픽셀 가로 여백, 5픽셀 위쪽 여백, 1픽셀 아래쪽 여백, 12픽셀 반경, #D5D3D3 기본 색상 및 #939393 활성 색상을 사용합니다.
.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;
}