As Amostras principais 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ó ficam visíveis na área de trabalho se todas as miniaturas não puderem se ajustar à largura do container. Em dispositivos móveis, ou se as miniaturas puderem se ajustar à largura do container, os botões de rolagem não serão exibidos.
A aparência do container de amostras é controlada com o seletor de classe CSS:
.s7mixedmediaviewer .s7swatches
Propriedades de CSS das amostras
altura |
A altura das amostras. |
bottom |
O deslocamento das amostras verticais em relação ao container do visualizador. |
Exemplo - para configurar amostras com uma altura de 100 pixels.
.s7mixedmediviewer .s7swatches {
height: 100px;
}
O espaçamento entre as miniaturas da amostra é controlado com o seguinte seletor de classe CSS:
.s7mixedmediaviewer .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, tanto na vertical quanto na horizontal.
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
A aparência da miniatura individual é controlada pelo seguinte seletor de classe CSS:
.s7mixedmediaviewer .s7swatches .s7thumb
Propriedade CSS |
Descrição |
---|---|
width |
Largura da miniatura. |
altura |
Altura da miniatura. |
fronteira |
Borda da miniatura. |
A miniatura suporta o seletor de atributos state
, que pode ser usado para aplicar diferentes capas a diferentes estados de miniaturas. Especificamente, state="selected"
corresponde à miniatura da imagem atualmente exibida na visualizaçã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, uma borda padrão cinza claro e uma borda cinza escura selecionada.
.s7mixedmediaviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
O tipo de ativo é exibido como um ícone sobreposto sobre a imagem em miniatura e é controlado com o seguinte seletor de classe CSS:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
Propriedade CSS |
Descrição |
---|---|
largura |
Largura da sobreposição do ícone. |
altura |
Altura da sobreposição do ícone. |
A sobreposição suporta o seletor de atributos type
com os seguintes valores possíveis: image
(para imagens únicas), swatchset
(para conjuntos de amostras), spinset
(para conjuntos de rotação) e video
(para vídeos únicos ou conjuntos de vídeo adaptáveis).
Exemplo - para configurar sobreposições de ícone para conjuntos de rotação, conjuntos de amostras e vídeos:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
background-image: url(images/v2/ThumbOverlayVideo.png);
}
A aparência dos botões de rolagem à esquerda e à direita são controlados com os seguintes seletores de classe CSS:
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton
Não é possível posicionar botões de rolagem usando as propriedades CSS top
, left
, bottom
e right
. 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. |
background-image |
A imagem que é exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites . |
Este botão suporta o seletor de atributos state
, 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 de elementos da interface do usuário para obter mais informações.
Exemplo - para configurar botões de rolagem com 56 x 56 pixels e arte-final diferente para cada estado.
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}