Botão girar para a esquerda

Clicar ou tocar nesse botão gira a imagem para a esquerda na exibição principal. Este botão não é exibido em telefones celulares para salvar propriedades de tela. Além disso, o botão fica oculto quando um conjunto de rotação multidimensional é usado. É possível dimensionar, usar a capa e posicionar o botão usando o CSS.

Propriedades CSS dos botões giratórios

O botão é adicionado a um contêiner interno controlado por DIV com o seletor de classe CSS:

.s7mixedmediaviewer .s7spinbuttons

Propriedade CSS

Descrição

top

Posição a partir da borda superior, incluindo o preenchimento.

right

Posição a partir da borda direita, incluindo o preenchimento.

left

Posição a partir da borda esquerda, incluindo o preenchimento.

bottom

Posição a partir da borda inferior, incluindo o preenchimento.

width

Largura do botão.

altura

Altura do botão.

A aparência desse botão dentro do contêiner é controlada com o seletor de classe CSS:

.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton

Propriedade CSS

Descrição

top

Posição a partir da borda superior, incluindo o preenchimento.

right

Posição a partir da borda direita, incluindo o preenchimento.

left

Posição a partir da borda esquerda, incluindo o preenchimento.

bottom

Posição a partir da borda inferior, incluindo o preenchimento.

largura

Largura do botão.

altura

Altura do botão.

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 pode ser usado para aplicar skins diferentes a estados de botão diferentes.

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 um botão girar para a esquerda com 28 x 28 pixels, que é posicionado na borda esquerda do contêiner interno e exibe uma imagem diferente para cada um dos quatro estados de botão diferentes:

.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton { 
 position:absolute; 
 left: 0px; 
 width:28px; 
 height:28px; 
 background-size:contain; 
 } 
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='up'] { 
background-image:url(images/v2/SpinLeftButton_light_up.png); 
} 
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='over'] { 
background-image:url(images/v2/SpinLeftButton_light_over.png); 
} 
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='down'] { 
background-image:url(images/v2/SpinLeftButton_light_down.png); 
} 
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='disabled'] { 
background-image:url(images/v2/SpinLeftButton_light_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