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 sobreposto 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:

.s7ecatalogviewer .s7thumbnailgridview

Propriedade CSS

Descrição

top

O deslocamento vertical do contêiner 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 do fundo

A cor de fundo da área de miniaturas.

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

.s7ecatalogviewer .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:

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

Propriedade CSS

Descrição

margem

O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento horizontal real da miniatura é 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 vertical e horizontalmente.

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

Propriedade CSS

Descrição

width

A largura da miniatura.

altura

A altura da miniatura.

border

A borda da miniatura.

cor do fundo

A cor 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 o catálogo espalhado em páginas individuais.

OBSERVAÇÃO

A miniatura é compatível com o seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Especificamente, state="selected" corresponde à miniatura da imagem exibida no momento 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, tenham um plano de fundo branco, uma borda padrão cinza-claro e uma borda selecionada cinza-escura.

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7label

Propriedade CSS

Descrição

família de fontes

Nome da fonte.

tamanho da fonte

Tamanho da fonte.

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

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

Caso haja mais miniaturas do que as que podem caber verticalmente na exibiçã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:

.s7ecatalogviewer .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 a partir da parte inferior da área de miniaturas.

right

O deslocamento da barra de rolagem horizontal 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 da parte superior, direita e inferior da área de miniaturas.

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

O rastreamento 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:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propriedade CSS

Descrição

largura

A largura do rastreamento da barra de rolagem.

cor do fundo

A cor de fundo do rastreamento 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.

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

O polegar da barra de rolagem se move verticalmente na área de trilha de rolagem. 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 do polegar e outros aspectos são controlados com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propriedade CSS

Descrição

largura

A largura do polegar da barra de rolagem.

altura

A altura da miniatura da barra de rolagem.

parte superior do preenchimento

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

parte inferior do preenchimento

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

imagem de fundo

A imagem exibida para um determinado estado de polegar.

posição de fundo

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

Consulte também Sprites CSS .

OBSERVAÇÃO

O botão 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 um polegar da barra de rolagem que seja 28 x 45 pixels, tenha margens de 10 pixels na parte superior e inferior e tenha arte-final diferente para cada estado.

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

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .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.

imagem de fundo

A imagem exibida para um determinado estado de polegar.

posição de fundo

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

Consulte também Sprites CSS .

OBSERVAÇÃO

Esses botões oferecem suporte ao seletor de atributos state, que pode ser usado para aplicar skins diferentes aos estados de botões 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 que são 28 x 32 pixels e têm arte-final diferente para cada estado.

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

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now