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 configurar o indicador de configuração 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 seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Especificamente, state="selected" corresponde à página atual das miniaturas, state="unselected" corresponde ao estado padrão do ponto.

Exemplo - para configurar o ponto indicador de configuração como 15 x 15 pixels, com dois pixels de margem horizontal, cinco pixels de margem superior, uma margem inferior de pixel, doze 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