As amostras consistem em uma linha de imagens em miniatura com botões de rolagem opcionais no lado esquerdo e direito. Os botões de rolagem só são visíveis na área de trabalho se todas as miniaturas não couberem na largura do contêiner. Em dispositivos móveis ou se as miniaturas couberem na largura do contêiner, os botões de rolagem não serão exibidos.
.s7zoomviewer .s7swatches
Propriedades CSS da área principal do visualizador
A aparência do contêiner de amostras é controlada com o seguinte seletor de classe CSS:
.s7zoomviewer .s7zoomresetbutton
Propriedade CSS |
Descrição |
---|---|
width |
Largura das amostras. |
altura |
Altura das amostras. |
bottom |
Deslocamento das amostras verticais em relação ao contêiner do visualizador. |
Exemplo - para configurar amostras para 460 x 100 pixels.
.s7zoomviewer .s7swatches {
width: 460px;
height: 100px;
}
O espaçamento entre as miniaturas da amostra é controlado com o seguinte seletor de classe CSS:
.s7zoomviewer .s7swatches .s7thumbcell
Propriedade CSS |
Descrição |
---|---|
margem |
O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento real das miniaturas é igual à soma das margens esquerda e direita definidas para .s7thumbcell . |
Exemplo
Para definir o espaçamento como dez pixels, vertical e horizontalmente.
.s7zoomviewer .s7swatches .s7thumbcell {
margin: 5px;
}
A aparência da miniatura individual é controlada com o seguinte seletor de classe CSS:
.s7zoomviewer .s7swatches .s7thumb
Propriedade CSS |
Descrição |
---|---|
largura |
Largura da miniatura. |
altura |
Altura da miniatura. |
border |
Borda da miniatura. |
A miniatura é compatível com o state
seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em especial, state="selected"
corresponde à miniatura da imagem exibida no momento na exibição principal, state="default"
corresponde ao resto das miniaturas, e state="over"
é usada ao passar o mouse.
Exemplo - para configurar miniaturas com 56 x 56 pixels, tenha uma borda padrão cinza-claro e uma borda cinza-escura selecionada.
.s7zoomviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7zoomviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
A aparência dos botões de rolagem esquerdo e direito é controlada pelos seguintes seletores de classe CSS:
.s7zoomviewer .s7swatches .s7scrollleftbutton
.s7zoomviewer .s7swatches .s7scrollrightbutton
Não é possível posicionar botões de rolagem usando propriedades CSS superior, esquerda, inferior e direita. Em vez disso, a lógica do visualizador os posiciona automaticamente.
Propriedade CSS |
Descrição |
---|---|
largura |
Largura do botão de rolagem. |
altura |
Altura do botão de rolagem. |
imagem de fundo |
A imagem exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte Sprites CSS . |
Esse botão suporta state
seletor de atributos, que pode ser usado para aplicar diferentes capas a diferentes estados de botão: up
, down
, over
e disabled
.
As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário.
Exemplo - para configurar botões de rolagem que tenham 56 x 56 pixels e tenham arte-final diferente para cada estado.
.s7zoomviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}