Exibição da 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 cursortype seletor de atributos que pode ser aplicado a .s7pageview e controla o tipo do cursor com base no estado do componente e na ação do usuário. O seguinte cursortype são compatíveis:

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 como 0 px para ocultar completamente o divisor.

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 a variável frametransition modificador está definido como turn ou auto (em sistemas de desktop), a aparência do divisor de página é controlada com o pageturnstyle modificador e o .s7pagedivider A classe CSS é ignorada.

É possível configurar a exibição do cursor do mouse personalizado sobre a área principal do visualizador. Essa funcionalidade é controlada com os seletores de atributos adicionais aplicados ao .s7ecatalogviewer .s7pageview Classe 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