Botão de tela cheia

Faz com que o visualizador entre ou saia do modo de tela cheia quando clicado pelo usuário. Esse botão aparece na barra de controle principal. Esse botão não será exibido se o visualizador funcionar no modo pop-up e o sistema não oferecer suporte a tela cheia nativa. É possível dimensionar, usar a capa e posicionar o botão por CSS.

Propriedades CSS da área principal do visualizador

A aparência do botão é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7fullscreenbutton

Propriedade CSS

Descrição

top

Posição a partir da borda superior da barra de controle principal, incluindo o preenchimento.

right

Posição a partir da borda direita da barra de controle principal, incluindo o preenchimento.

left

Posição da borda esquerda da barra de controle principal, incluindo o preenchimento.

bottom

Posição a partir da borda inferior da barra de controle principal, incluindo o preenchimento.

width

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 também Sprites CSS .

OBSERVAÇÃO

Esse botão suporta os seletores de atributos state e selected, que podem ser usados para aplicar capas diferentes a estados de botão diferentes. Especificamente, selected='true' corresponde ao estado de “tela cheia” e selected='false' corresponde ao estado “normal”.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar um botão de tela cheia com 28 x 28 pixels, posicionado 4 pixels da parte inferior e 5 pixels da borda direita da barra de controle principal, e exibir uma imagem diferente para cada um dos quatro estados de botão diferentes quando selecionado ou não selecionado.

.s7ecatalogsearchviewer .s7fullscreenbutton { 
bottom:4px; 
right:5px; 
width:28px; 
height:28px; 
} 
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='up'] { 
background-image:url(images/enterFullBtn_up.png); 
} 
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='over'] {  
background-image:url(images/enterFullBtn_over.png); 
} 
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='down'] {  
background-image:url(images/enterFullBtn_down.png); 
} 
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='disabled'] { 
background-image:url(images/enterFullBtn_disabled.png); 
} 
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='up'] {  
background-image:url(images/exitFullBtn_up.png); 
} 
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='over'] {  
background-image:url(images/exitFullBtn_over.png); 
} 
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='down'] {  
background-image:url(images/exitFullBtn_down.png); 
} 
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='disabled'] {  
background-image:url(images/exitFullBtn_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