Indicador de definição é 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 de CSS do indicador de conjunto
A aparência do container indicador definido é controlada com o seguinte seletor de classe CSS:
.s7zoomviewer .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:
.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. |
raio da borda |
Raio da borda em pixels. |
cor de fundo |
Cor do plano de fundo em formato hexadecimal. |
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:
.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;
}