Amostras

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ó estarão visíveis na área de trabalho se todas as miniaturas não puderem se encaixar 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 sã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

width

A largura das amostras.

altura

A altura das amostras.

bottom

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 em 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 das miniaturas é igual à soma da margem esquerda e direita definida para .s7thumbcell .

Exemplo - para configurar o espaçamento para ser de 10 pixels, vertical 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.

border

A borda das amostras de miniatura.

OBSERVAÇÃO

A miniatura é compatível com o seletor de atributos state, que é usado para aplicar capas diferentes a estados de miniatura diferentes. Especificamente, state="selected" corresponde à miniatura da imagem 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, tenha uma borda padrão cinza-claro e uma borda cinza-escura selecionada:

.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 esquerdo e direito

A aparência dos botões de rolagem esquerda e 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 as propriedades CSS top, left, bottom e right. Em vez disso, a lógica do visualizador os 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.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que é usado para aplicar skins diferentes a 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 que tenham 56 x 56 pixels e tenham arte-final 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); 
}

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now