Definir indicador

Indicador de definição é uma série de pontos renderizados sobre as amostras principais 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 de CSS do indicador de conjunto

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

.s7mixedmediaviewer .s7setindicator

Propriedade CSS

Descrição

cor de fundo

A cor do plano de fundo no formato hexadecimal do indicador de conjunto.

Exemplo - para configurar o indicador de configuração com um fundo branco:

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

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

.s7mixedmediaviewer .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.

raio da borda

Raio da borda em pixels.

cor de 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 diferentes capas a diferentes estados de miniaturas. Especificamente, state="selected" corresponde à página atual das miniaturas, state="unselected" corresponde ao estado de ponto padrão.

Exemplo - para configurar o ponto indicador definido 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:

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

Nesta página