Índice

Índice é um botão localizado na barra de controle principal. Quando ativado, um painel suspenso é exibido com uma lista de índices e rótulos de página.

Com base na configuração, a lista pode conter todas as páginas que estão presentes no catálogo ou apenas as páginas que têm rótulos explícitos definidos. Em sistemas de desktop, se a lista for maior que o tamanho real da tela disponível, uma barra de rolagem será exibida à direita.

A posição e o tamanho do botão do índice na interface do usuário do visualizador são controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents

Propriedades CSS do índice

margem superior

O deslocamento da parte superior da barra de controle.

margem esquerda

A distância até ao botão seguinte à esquerda ou à esquerda da barra de controle, se este for o primeiro botão de uma linha.

width

A largura do botão do índice.

altura

A altura do botão do índice.

imagem de fundo

A imagem exibida para um determinado estado de botão.

posição de fundo

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

Consulte também Sprites CSS .

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que pode ser usado para aplicar skins diferentes a estados de botão diferentes.

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 - configure um botão de índice posicionado 4 pixels da parte inferior e 43 pixels da esquerda da barra de controle principal; O tamanho é 28 x 28 pixels e uma imagem diferente é exibida para cada um dos quatro estados de botão diferentes:

.s7ecatalogsearchviewer .s7tableofcontents { 
margin-top: 4px; 
margin-left: 10px; width: 28px; 
 height: 28px; 
} 
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] { 
background-image:url(images/v2/TableOfContents_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] { 
background-image:url(images/v2/TableOfContents_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] { 
background-image:url(images/v2/TableOfContents_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] { 
background-image:url(images/v2/TableOfContents_dark_disabled.png); 
}

A aparência do painel suspenso é controlada com o seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel

Propriedades de CSS do painel suspenso

cor do fundo

Cor do plano de fundo do painel suspenso.

margem

Deslocamento interno entre os limites do painel e o conteúdo.

sombra de caixa

Sombra ao redor do painel.

OBSERVAÇÃO

Não é possível controlar o tamanho ou a posição do painel suspenso a partir do CSS; o componente gerencia seu layout de forma programática.

Exemplo - configure um painel suspenso que tenha um plano de fundo preto semitransparente, uma margem de 5 pixels em torno do conteúdo e uma sombra:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel { 
 background-color: rgba(0, 0, 0, 0.5); 
 margin: 5px; 
 box-shadow: 2px 2px 3px #c0c0c0; 
}

A aparência e comportamento individual do item é controlada com o seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

Propriedades CSS do item

família de fontes

Nome da fonte.

tamanho da fonte

Tamanho da fonte.

altura

Altura do item.

preenchimento

Preenchimento interno.

OBSERVAÇÃO

O item de lista suspensa é compatível com o seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de passar o mouse e itens selecionados.

Exemplo - configure um item suspenso com uma fonte Helvetica de 14 pixels e 19 pixels de altura. Um item tem um plano de fundo cinza escuro ao passar o mouse e um plano de fundo cinza claro quando selecionado:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item { 
font-family: Helvetica,sans-serif; 
font-size: 14px; 
height: 19px; 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] { 
background-color: rgb(102, 102, 102); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] { 
background-color: rgb(178, 178, 178); 
}

Um elemento que mostra o índice de página é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

Propriedades CSS do índice de página

largura mínima

Largura mínima do elemento.

largura máxima

Largura máxima do elemento.

preenchimento à direita

Distância entre o índice de página e o rótulo da página.

OBSERVAÇÃO

É possível ocultar o índice de página completamente definindo display:none para a classe CSS s7index.

Exemplo 1 - configure um índice de página com uma largura mínima de 40 pixels, uma largura máxima de 70 pixels e uma margem de 5 pixels no lado direito:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index { 
max-width: 70px; 
min-width: 40px; 
padding-right: 5px; 
}

Exemplo 2 - ocultar índice de página:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index { 
display: none; 
}

O rótulo da página é controlado com o seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label

Propriedades CSS do rótulo da página

largura mínima

Largura mínima do elemento.

largura máxima

Largura máxima do elemento.

Exemplo - configure um índice de página com uma largura mínima de 40 pixels e uma largura máxima de 240 pixels:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label { 
min-width: 40px; 
max-width: 240px; 
}

Caso haja mais itens que possam caber verticalmente no painel suspenso e o sistema seja uma área de trabalho, o componente renderiza uma barra de rolagem vertical no lado direito do painel. A aparência da área da barra de rolagem é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar

Propriedades CSS da barra de rolagem

largura

A largura da barra de rolagem.

top

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

bottom

O deslocamento da barra de rolagem vertical a partir da parte inferior da área do painel.

right

O deslocamento da barra de rolagem horizontal da borda direita da área do painel.

Exemplo - configure uma barra de rolagem com 28 pixels de largura e não tenha uma margem para a área superior, direita ou inferior do painel:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar { 
 top:0px; 
 bottom:0px; 
 right:0px; 
 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:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

Propriedades de CSS da faixa de rolagem

largura

A largura da faixa.

cor do fundo

A cor do plano de fundo da faixa.

Exemplo - configure um rastreamento de barra de rolagem com 28 pixels de largura e um plano de fundo cinza semitransparente:

.s7ecatalogsearchviewer .s7tableofcontents .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 é controlada pela lógica do componente. No entanto, a altura do polegar não muda dinamicamente, dependendo da quantidade de conteúdo. Você pode configurar a altura do polegar e outros aspectos com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

Propriedades CSS do polegar da barra de rolagem

largura

A largura do polegar.

altura

A altura do polegar.

parte superior do preenchimento

O preenchimento vertical entre a parte superior da faixa.

parte inferior do preenchimento

O preenchimento vertical entre a parte inferior da faixa.

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 skins diferentes aos estados de miniatura up, down, over e disabled.

Exemplo - configure um polegar da barra de rolagem que seja 28 x 45 pixels, tenha margens de 10 pixels na parte superior e inferior e tenha uma arte-final diferente para cada estado:

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

Propriedades CSS do botão de rolagem para cima e rolagem para baixo

largura

A largura do botão.

altura

A altura do botão.

imagem de fundo

A imagem exibida para um determinado estado de botão.

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 atributo state, que pode ser usado para aplicar capas diferentes aos estados dos botões 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 - configure os botões de rolagem que têm 28 x 32 pixels e têm arte-final diferente para cada estado:

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

Nesta página