O indicador Set é uma série de pontos renderizados na parte inferior do visualizador. Mostra a posição atual no conjunto.
Propriedades CSS do indicador de conjunto
A aparência do contêiner indicador definido é controlada com o seguinte seletor de classe CSS:
.s7carouselviewer .s7setindicator
Propriedade CSS |
Descrição |
---|---|
cor do fundo |
A cor do plano de fundo em formato hexadecimal do indicador definido. |
O indicador Set suporta o seletor de atributo mode, que pode ser usado para aplicar estilos diferentes para modos de operação pontilhados e numéricos. Em particular, mode="numeric"
corresponde ao modo de operação numérico; mode="dotted"
corresponde ao estado de ponto padrão.
Por exemplo, suponha que você deseja configurar um indicador de conjunto com um fundo branco:
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
A aparência de um ponto indicador de conjunto individual é controlada com o seletor de classe CSS. Aplica-se a itens em modos de operação pontilhados e numéricos.
.s7carouselviewer .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. |
família de fontes |
Nome da fonte. |
tamanho da fonte |
Tamanho da fonte. |
color |
Cor da fonte. |
alinhamento vertical |
Alinhamento vertical do índice do banner. |
altura da linha |
Altura do texto para o índice do banner. |
Os itens do indicador definido oferecem suporte ao seletor de atributos state
, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em particular, state="selected"
corresponde ao elemento atual no conjunto; state="unselected"
corresponde ao estado padrão do item.
Por exemplo, suponha que você queira configurar um indicador de configuração no modo pontilhado para os sistemas de desktop. Você quer que ele seja posicionado 20 pixels da parte inferior do visualizador. E você quer que os pontos não selecionados sejam pretos com 50% de transparência, 15 x 15 pixels com sete pixels de cantos arredondados. Os pontos selecionados são pretos com 90% de transparência, 18 x 18 pixels com nove pixels de cantos arredondados. O espaçamento entre pontos é de cinco pixels.
.s7carouselviewer.s7mouseinput .s7setindicator {
bottom: 20px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{
width:15px;
height:15px;
margin-left:2.5px;
margin-right:2.5px;
margin-top:2.5px;
margin-bottom:2.5px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {
width:18px;
height:18px;
background-color: #000000;
opacity: 0.9;
border-radius:9px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {
width:15px;
height:15px;
background-color: #000000;
opacity: 0.5;
border-radius:7px;
}