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
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
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
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.
Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.
Consulte Sprites CSS.
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);
}