Índice table-of-contents

O índice é um botão posicionado 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 presentes no catálogo ou apenas as páginas que têm rótulos explícitos definidos. Em sistemas desktop, se a lista for maior que o espaço disponível na tela, uma barra de rolagem será exibida à direita.

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

.s7ecatalogviewer .s7tableofcontents

Propriedades CSS do sumário

margem superior
O deslocamento da parte superior da barra de controle.
margem esquerda
A distância até o próximo botão à esquerda ou o lado esquerdo da barra de controle, se for o primeiro botão consecutivo.
largura
A largura do botão de sumário.
altura
A altura do botão de índice.
background-image
A imagem exibida para um determinado estado de botão.
background-position

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

Consulte também Sprites CSS.

NOTE
Esse botão oferece suporte ao state seletor de atributo, que pode ser usado para aplicar capas 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 - Para configurar um botão de sumário posicionado a 4 pixels da parte inferior e a 43 pixels da esquerda da barra de controle principal. O tamanho é de 28 x 28 pixels e uma imagem diferente é exibida para cada um dos quatro estados de botão diferentes:

.s7ecatalogviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogviewer .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:

 .s7ecatalogviewer .s7tableofcontents .s7panel

Propriedades CSS do painel suspenso

background-color
Cor de fundo do painel suspenso.
margem
Deslocamento interno entre os limites do painel e o conteúdo.
box-shadow
Sombra projetada ao redor do painel.
NOTE
Não é possível controlar o tamanho ou a posição do painel suspenso a partir do CSS; o componente gerencia o layout de forma programática.

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

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

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

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

Propriedades CSS do item

font-family
Nome da fonte.
font-size
Tamanho da fonte.
altura
Altura do item.
preenchimento
Preenchimento interno.
NOTE
O item da lista suspensa suporta o state seletor de atributo, que pode ser usado para aplicar capas diferentes para passar o mouse e selecionar estados do item.

Exemplo - configurar 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:

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

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

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

Propriedades CSS do índice da página

largura mínima
Largura mínima do elemento.
max-width
Largura máxima do elemento.
preenchimento à direita
Distância entre o índice da página e o rótulo da página.
NOTE
É possível ocultar o índice de página totalmente ao configurar display:none para o s7index Classe CSS.

Exemplo 1: configurar 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:

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

Exemplo 2 - ocultar índice da página:

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

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

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

Propriedades CSS do rótulo da página

largura mínima
Largura mínima do elemento.
max-width
Largura máxima do elemento.

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

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

Se houver mais itens que possam caber verticalmente no painel suspenso e o sistema for um desktop, 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:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

Propriedades CSS da barra de rolagem

largura
A largura da barra de rolagem.
top
O deslocamento da barra de rolagem vertical na parte superior da área do painel.
bottom
O deslocamento da barra de rolagem vertical na parte inferior da área do painel.
direita
O deslocamento da barra de rolagem horizontal em relação à borda direita da área do painel.

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

Propriedades CSS da faixa de rolagem

largura
A largura da faixa.
background-color
A cor do plano de fundo da faixa.

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

Propriedades CSS da miniatura da barra de rolagem

largura
A largura da miniatura.
altura
A altura do polegar.
padding-top
O preenchimento vertical entre o topo da faixa.
preenchimento inferior
O preenchimento vertical entre a parte inferior da faixa.
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.

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

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7tableofcontents .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.

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.
background-image
A imagem exibida para um determinado estado de botão.
background-position

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

Consulte também Sprites CSS.

NOTE
O botão suporta a variável state seletor de atributo, que pode ser usado para aplicar capas diferentes ao up, down, over, e disabled estados do botão.

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8