Exibição de página

A exibição principal consiste na imagem do catálogo. Ele pode ser deslizado para chegar a outra página ou ampliado.

Propriedades CSS da área principal do visualizador

A aparência da área de visualização é controlada com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7pageview

Propriedade CSS

Descrição

cor do fundo

Cor do plano de fundo da exibição principal em formato hexadecimal.

cursor

Cursor que é exibido sobre a exibição principal.

Exemplo - para tornar a exibição principal transparente.

.s7ecatalogviewer .s7pageview { 
 background-color: transparent; 
}

Em sistemas de desktop, o componente suporta o seletor de atributos cursortype que pode ser aplicado à classe .s7pageview e controla o tipo do cursor com base no estado do componente e na ação do usuário. Os seguintes valores cursortype são suportados:

Valor

Descrição

default

Exibida quando a imagem não é ampliável devido a uma pequena resolução de imagem, configurações de componente ou ambos.

zoomina

Exibido quando a imagem puder ser ampliada.

redefinir

Exibida quando a imagem está no nível máximo de zoom e pode ser redefinida para o estado inicial.

arrastar

Exibido quando o usuário expande a imagem que está no estado com zoom.

slide

Exibido quando o usuário realiza uma troca de imagem ao deslizar ou piscar na horizontal.

O divisor de página que separa visualmente as páginas esquerda e direita do spread do catálogo é controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7pageview .s7pagedivider

Propriedade CSS

Descrição

width

A largura do divisor de página. Defina para 0 px para ocultar o divisor completamente.

imagem de fundo

A imagem que você deseja usar como o divisor de página.

Exemplo - para ter divisor de página de 40 pixels de largura com imagem semitransparente.

.s7ecatalogviewer .s7pageview .s7pagedivider { 
 width:40px; 
 background-image:url(images/sdk/divider.png); 
}
OBSERVAÇÃO

Quando o modificador frametransition está definido como turn ou auto (em sistemas de desktop), a aparência do divisor de página é controlada com o modificador pageturnstyle e a classe CSS .s7pagedivider é ignorada.

É possível configurar a exibição do cursor do mouse personalizado sobre a área principal do visualizador. Isso é controlado com seletores de atributos adicionais aplicados à classe .s7ecatalogviewer .s7pageview CSS:

Propriedade CSS

Descrição

default

Normalmente, uma seta é exibida para imagens sem zoom.

zoomina

Mostra quando uma imagem pode ser ampliada.

redefinir

Mostra quando uma imagem está no zoom máximo e pode ser redefinida.

arrastar

Mostra quando o usuário executa a operação de arrastar com zoom na imagem

slide

Mostra quando o usuário realiza a troca de imagem usando gesto de slide

Exemplo - tem cursores de mouse diferentes para cada tipo de estado de componente.

.s7ecatalogviewer .s7pageview[cursortype="default"] { 
cursor:auto; 
} 
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] { 
cursor:url(images/zoomin_cursor.cur), auto; 
} 
.s7ecatalogviewer .s7pageview[cursortype="reset"] { 
cursor:url(images/zoomout_cursor.cur), auto; 
} 
.s7ecatalogviewer .s7pageview [cursortype="slide"] { 
cursor:url(images/slide_cursor.cur), auto; 
} 
.s7ecatalogviewer .s7pageview[cursortype="drag"] { 
cursor:url(images/drag_cursor.cur), auto; 
}

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