Definir indicador set-indicator

Definir indicador é uma série de pontos renderizados sobre as principais 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 definição

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

.s7mixedmediaviewer .s7setindicator
Propriedade CSS
Descrição
cor de fundo
A cor do plano de fundo em formato hexadecimal do indicador de definição.

Exemplo - Para criar um indicador de definição com um plano de fundo branco:

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

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

.s7mixedmediaviewer .s7setindicator .s7dot

Propriedade CSS
Descrição
largura
Largura do ponto indicador de definição.
altura
Altura do ponto indicador definido.
margem esquerda
Margem esquerda em pixels.
margem superior
Margem superior em pixels.
margem direita
Margem direita em pixels.
margem inferior
Margem inferior em pixels.
raio da borda
Raio da borda em pixels.
cor de fundo
Cor de fundo em formato hexadecimal.
NOTE
Definir ponto indicador dá suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Especificamente, state="selected" corresponde à página atual de miniaturas, state="unselected" corresponde ao estado de ponto padrão.

Exemplo - Para criar um ponto indicador de definição com 15 x 15 pixels, com uma margem horizontal de dois pixels, margem superior de cinco pixels, margem inferior de um pixel, raio de 12 pixels, cor padrão #D5D3D3 e cor ativa #939393:

.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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8