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 ao clicar no botão de miniatura na barra de controle principal. Quando as miniaturas estão ativas, elas são exibidas no modo modal sobreposto na parte superior da interface do usuário do visualizador. A lógica do visualizador redimensiona automaticamente o container de miniaturas para toda a área do visualizador.

A aparência do container de miniaturas é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview

Propriedade CSS

Descrição

top

O deslocamento vertical do container de miniaturas na parte superior do visualizador.

margem superior

A margem superior.

margem esquerda

A margem esquerda.

margem direita

A margem direita.

margin-bottom

A margem inferior.

cor de fundo

A cor de fundo da área de miniaturas.

Exemplo - para configurar miniaturas com 32 pixels de deslocamento da parte superior, margens de 5 pixels à esquerda e à direita e margem de 8 pixels na parte inferior, com 0xDDDDDD plano de fundo.

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

O espaçamento entre 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 horizontal real das miniaturas é igual à soma da margem esquerda e direita definida para .s7thumbcell . Espaçamento entre miniaturas verticais é igual à soma das margens superior e inferior.

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

.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

width

A largura da miniatura.

altura

A altura da miniatura.

fronteira

A borda da miniatura.

cor de fundo

A cor de fundo da miniatura.

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

OBSERVAÇÃO

A miniatura suporta o seletor de atributos state, que pode ser usado para aplicar diferentes capas a diferentes estados de miniaturas. Especificamente, state="selected" corresponde à miniatura da imagem atualmente exibida na visualizaçã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, um fundo branco, uma borda padrão cinza claro e uma borda cinza escura selecionada.

.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 da etiqueta em miniatura é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Propriedade CSS

Descrição

família de fontes

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

Caso haja mais miniaturas do que as que podem ser ajustadas verticalmente na visualização, as miniaturas renderizam 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

A barra de rolagem vertical é deslocada da parte superior da área de miniaturas.

bottom

A barra de rolagem vertical é deslocada da parte inferior da área de miniaturas.

right

A barra de rolagem horizontal é deslocada 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 a partir da 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.

cor de fundo

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

Exemplo - para configurar um rastreamento 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 faixa. Sua posição vertical é totalmente controlada pela lógica do componente, no entanto, a altura do polegar não muda dinamicamente dependendo da quantidade de conteúdo. A altura do polegar 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 rolagem.

altura

A altura da miniatura da barra de rolagem.

tampa superior

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

camada inferior

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

background-image

A imagem que é exibida para um determinado estado de miniatura.

posição de fundo

Posição dentro da sprite de arte, se os sprites CSS forem usados.

Consulte também CSS Sprites .

OBSERVAÇÃO

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

Exemplo - para configurar uma miniatura da barra de rolagem com 28 x 45 pixels, margens de 10 pixels na parte superior e inferior e uma 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 pelos seguintes seletores de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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

Propriedade CSS

Descrição

largura

A largura do botão.

altura

A altura do botão.

background-image

A imagem que é exibida para um determinado estado de miniatura.

posição de fundo

Posição dentro da sprite de arte, se os sprites CSS forem usados.

Consulte também CSS Sprites .

OBSERVAÇÃO

Esses botões oferecem suporte ao seletor de atributos state, que pode ser usado para aplicar diferentes capas aos diferentes estados de botões up, down, over e disabled.

A dica de ferramenta do botão pode ser localizada. Consulte Localização de elementos da interface do usuário para obter mais informações.

Exemplo - para configurar botões de rolagem com 28 x 32 pixels e arte-final diferente 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