Definir indicador

O indicador Set é uma série de pontos renderizados sobre amostras quando um visualizador é usado em um dispositivo de toque. Os pontos ajudam os usuários a navegar pelas páginas de miniaturas quando os botões de rolagem não estão disponíveis.

Propriedades CSS do indicador de conjunto

A aparência do contêiner indicador definido é controlada com o seguinte seletor de classe CSS:

.s7zoomviewer .s7setindicator

Propriedade CSS

Descrição

cor do fundo

A cor do plano de fundo em formato hexadecimal do indicador definido.

Exemplo - Para criar um indicador de conjunto com um fundo branco:

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

A aparência de um ponto indicador de conjunto individual é controlada com o seletor de classe CSS:

.s7zoomviewer .s7setindicator .s7dot

Propriedade CSS

Descrição

width

Largura do ponto indicador definido.

altura

Altura do ponto indicador definido.

margem esquerda

Margem esquerda em pixels.

margem superior

Margem superior em pixels.

margem direita

Margem direita em pixels.

margin-bottom

Margem inferior em pixels.

border-radius

Raio da borda em pixels.

cor do fundo

Cor do plano de fundo em formato hexadecimal.

OBSERVAÇÃO

Definir ponto indicador suporta o state seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em especial, state="selected" corresponde à página atual de miniaturas, state="unselected" corresponde ao estado de ponto padrão.

Exemplo - Para criar um ponto indicador definido para ser 15 x 15 pixels, com 2 pixels de margem horizontal, 5 pixels de margem superior, 1 pixel de margem inferior, 12 pixels de raio, #D5D3D3 de cor padrão e #939393 de cor ativa:

.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;
}

Nesta página