Definir indicador

Última atualização em 2023-05-20
  • Criado para:
  • Developer
    User

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

background-color

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.

border-radius

Raio da borda em pixels.

background-color

Cor de fundo em formato hexadecimal.

OBSERVAÇÃO

Definir ponto indicador é compatível com 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 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;
}

Nesta página