Amostras swatches

As amostras consistem em uma linha de imagens em miniatura com botões de rolagem opcionais nos lados esquerdo e direito.

Os botões de rolagem só estarão visíveis na área de trabalho se todas as miniaturas não couberem na largura do container. Em dispositivos móveis, ou se as miniaturas puderem se ajustar à largura do contêiner, os botões de rolagem não serão exibidos.

Propriedades CSS das amostras

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

.s7flyoutviewer .s7swatches
Propriedade CSS
Descrição
largura
A largura das amostras.
altura
A altura das amostras.
inferior
O deslocamento das amostras verticais em relação ao contêiner do visualizador.

Exemplo - para configurar amostras para 460 x 100 pixels:

.s7flyoutviewer .s7swatches {
 width: 460px;
 height: 100px;
}

Propriedades CSS do espaçamento da amostra de miniatura

O espaçamento entre as miniaturas de amostra é controlado com o seletor de classe CSS:

.s7flyoutviewer .s7swatches .s7thumbcell
Propriedade CSS
Descrição
margem
O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento real entre miniaturas é igual à soma das margens esquerda e direita definidas para .s7thumbcell .

Exemplo - para configurar o espaçamento como dez pixels verticalmente e horizontalmente:

.s7flyoutviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

Propriedades CSS das amostras de miniatura

A aparência da miniatura individual é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7swatches .s7thumb
Propriedade CSS
Descrição
largura
A largura das amostras de miniatura.
altura
A altura das amostras de miniatura.
borda
A borda das amostras de miniatura.
NOTE
A miniatura dá suporte ao seletor de atributos state, que é usado para aplicar capas diferentes a estados de miniatura diferentes. Especificamente, state="selected" corresponde à miniatura da imagem que está sendo exibida no momento na exibição principal, state="default" corresponde ao restante das miniaturas e state="over" é usado ao passar o mouse.

Exemplo - para configurar miniaturas com 56 x 56 pixels, ter uma borda padrão cinza-claro e uma borda selecionada cinza-escuro:

.s7flyoutviewer .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7flyoutviewer .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

Propriedades CSS dos botões de rolagem para a esquerda e para a direita

A aparência dos botões de rolagem para a esquerda e para a direita é controlada com os seguintes seletores de classe CSS:

.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton

Não é possível posicionar botões de rolagem usando propriedades CSS top, left, bottom e right. Em vez disso, a lógica do visualizador as posiciona automaticamente.

Propriedade CSS
Descrição
largura
A largura do botão de rolagem.
altura
A altura do botão de rolagem.
imagem de fundo
A imagem exibida para um determinado estado de botão.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS.

NOTE
Este botão oferece suporte ao seletor de atributos state, que é usado para aplicar capas diferentes aos 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 para obter mais informações.

Exemplo - para configurar botões de rolagem com 56 x 56 pixels e que tenham um trabalho artístico diferente para cada estado:

.s7flyoutviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8