Miniaturas

As miniaturas consistem em uma grade de imagens em miniatura com uma barra de rolagem opcional no lado direito para permitir a rolagem vertical.

As miniaturas são alternadas clicando no botão de miniatura na barra de controle principal. Quando as miniaturas estão ativas, elas são exibidas no modo modal, sobrepostas na parte superior da interface do usuário do visualizador. A lógica do visualizador redimensiona automaticamente o contêiner de miniaturas para toda a área do visualizador.

A aparência do contêiner de miniaturas é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview

Propriedade CSS

Descrição

top

O deslocamento vertical do contêiner de miniaturas da parte superior do visualizador.

margem superior

A margem superior.

margem esquerda

A margem esquerda.

margem direita

A margem direita.

margem inferior

A margem inferior.

background-color

A cor do plano de fundo da área de miniaturas.

Exemplo - configurar miniaturas para ter 32 pixels deslocados em relação à parte superior, 5 pixels à esquerda e à direita e 8 pixels na margem inferior, com 0xDDDDDD fundo.

.s7ecatalogsearchviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

O espaçamento entre as miniaturas é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

Propriedade CSS

Descrição

margem

O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento de miniatura horizontal real é igual à soma das margens esquerda e direita definidas para .s7thumbcell . Espaçamento vertical entre miniaturas igual à soma das margens superior e inferior.

Exemplo - para definir um espaço de 10 pixels vertical e horizontalmente.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

A aparência da miniatura individual é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

Propriedade CSS

Descrição

largura

A largura da miniatura.

altura

A altura da miniatura.

borda

A borda da miniatura.

background-color

A cor do plano de fundo da miniatura.

Em dispositivos de toque, quando girado para o modo retrato, o visualizador pode dimensionar miniaturas para metade do que está configurado, caso decida dividir a visualização do catálogo em páginas individuais.

OBSERVAÇÃO

A miniatura suporta o state seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em especial, state="selected" corresponde à miniatura da imagem que está sendo exibida na exibição principal, state="default" corresponde ao restante das miniaturas e state="over" é usado ao passar o mouse.

Exemplo - para configurar miniaturas com 120 x 85 pixels, tenha um plano de fundo branco, uma borda padrão cinza-claro e uma borda selecionada cinza-escuro.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

A aparência do rótulo da miniatura é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Propriedade CSS

Descrição

font-family

Nome da fonte.

font-size

Tamanho da fonte.

Exemplo - para configurar rótulos para usar a fonte Helvetica® de 14 pixels.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

Se houver mais miniaturas que possam caber verticalmente na exibição, elas renderizarão a barra de rolagem vertical no lado direito. A aparência da área da barra de rolagem é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

Propriedade CSS

Descrição

largura

A largura da barra de rolagem.

top

O deslocamento da barra de rolagem vertical a partir da parte superior da área de miniaturas.

bottom

O deslocamento da barra de rolagem vertical na parte inferior da área de miniaturas.

direita

O deslocamento da barra de rolagem horizontal a partir da borda direita da área de miniaturas.

Exemplo - para configurar uma barra de rolagem com 28 pixels de largura e uma margem de 8 pixels na parte superior, direita e inferior da área de miniaturas.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

A faixa da barra de rolagem é a área entre os botões de rolagem superior e inferior. O componente define automaticamente a posição e a altura da faixa. A faixa é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propriedade CSS

Descrição

largura

A largura da faixa da barra de rolagem.

background-color

A cor do plano de fundo da faixa da barra de rolagem.

Exemplo - para configurar uma faixa de barra de rolagem com 28 pixels de largura e um plano de fundo cinza semitransparente.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

A miniatura da barra de rolagem se move verticalmente dentro da área de rolagem da trilha. Sua posição vertical é totalmente controlada pela lógica do componente. No entanto, a altura da miniatura não muda dinamicamente, dependendo da quantidade de conteúdo. A altura da miniatura e outros aspectos são controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propriedade CSS

Descrição

largura

A largura da miniatura da barra de rolamento.

altura

A altura da miniatura da barra de rolagem.

padding-top

O preenchimento vertical entre a parte superior da faixa da barra de rolagem.

preenchimento inferior

O preenchimento vertical entre a parte inferior da faixa da barra de rolagem.

background-image

A imagem exibida para um determinado estado de miniatura.

background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS .

OBSERVAÇÃO

A miniatura suporta o state seletor de atributo, que pode ser usado para aplicar capas diferentes aos estados de miniatura up, down, over, e disabled.

Exemplo - para configurar uma miniatura de barra de rolagem com 28 x 45 pixels, tem margens de 10 pixels na parte superior e inferior e tem arte-final diferente para cada estado.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

A aparência dos botões de rolagem superior e inferior é controlada com os seguintes seletores de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Não é possível posicionar os botões de rolagem usando CSS top, left, bottom, e right propriedades. Em vez disso, a lógica do visualizador as posiciona automaticamente.

Propriedade CSS

Descrição

largura

A largura do botão.

altura

A altura do botão.

background-image

A imagem exibida para um determinado estado de miniatura.

background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS .

OBSERVAÇÃO

Esses botões suportam o state seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes up, down, over, e disabled.

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 botões de rolagem com 28 x 32 pixels e diferentes trabalhos artísticos para cada estado.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}

Nesta página