Visualização de página

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

Propriedades de CSS da área do visualizador principal

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

.s7ecatalogviewer .s7pageview

Propriedade CSS

Descrição

cor de fundo

Cor de fundo da visualização principal em formato hexadecimal.

cursor

O cursor que é exibido sobre a visualização principal.

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

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

Em sistemas desktop, o componente suporta o seletor de atributos cursortype que pode ser aplicado à classe .s7pageview e controla o tipo de 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

Exibido quando a imagem não tem zoom devido a uma pequena resolução de imagem, configurações de componente ou ambos.

zoomin

Exibido quando a imagem pode ser ampliada.

reiniciar

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

arrasto

Exibido quando o usuário desloca a imagem que está no estado ampliado.

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 da página espelhada do catálogo é controlado pelo 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.

background-image

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

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

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

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

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

Propriedade CSS

Descrição

default

Normalmente, uma seta é exibida para uma imagem sem zoom.

zoomin

Mostra quando uma imagem pode ser ampliada.

reiniciar

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

arrasto

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 o gesto de slide

Exemplo - tem cursores de mouse diferentes para cada tipo de estado do 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