Definir indicador

O indicador Set é 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 CSS do indicador de conjunto

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

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

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

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 com 15 x 15 pixels, com uma margem horizontal de dois pixels, uma margem superior de cinco pixels, uma margem inferior de pixel, um raio de 12 pixels, #D5D3D3 cor padrão e #939393 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