セットインジケーターは、タッチデバイスでビューアを使用したときにスウォッチの上にレンダリングされる一連のドットです。 ドットは、スクロールボタンを使用できない場合に、サムネールのページ間を移動するのに役立ちます。
設定インジケーターの CSS プロパティ
設定インジケーターコンテナの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7zoomviewer .s7setindicator
CSS プロパティ |
説明 |
---|---|
background-color |
設定インジケーターの 16 進数形式の背景色。 |
例 — 背景が白の設定インジケーターを作成するには:
.s7zoomviewer .s7setindicator {
background-color: #FFFFFF;
}
個々のセットインジケーターのドットの外観は、CSS クラスセレクターを使用して制御します。
.s7zoomviewer .s7setindicator .s7dot
CSS プロパティ |
説明 |
---|---|
width |
設定インジケーターのドットの幅。 |
height |
設定インジケーターのドットの高さ。 |
margin-left |
左余白(ピクセル単位)。 |
margin-top |
上余白(ピクセル単位)。 |
margin-right |
右余白(ピクセル単位)。 |
margin-bottom |
下余白(ピクセル単位)。 |
border-radius |
境界線の半径(ピクセル単位)。 |
background-color |
16 進数形式の背景色。 |
インジケーターのドットを設定すると、 state
属性セレクター。サムネールの状態ごとに異なるスキンを適用するのに使用できます。 特に state="selected"
は、現在のサムネールのページに対応します。 state="unselected"
は、デフォルトのドットの状態に対応します。
例 — 15 x 15 ピクセルで、2 ピクセルの水平マージン、5 ピクセルの上マージン、1 ピクセルの下マージン、12 ピクセルの半径、#D5D3D3 default color および#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;
}