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);
}
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;
}