O sumário é um botão localizado na barra de controle principal. Quando ativado, um painel suspenso é exibido com uma lista de índices de página e rótulos.
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 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 de sumário na interface do usuário do visualizador são controlados com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7tableofcontents
Propriedades de CSS do sumário
margem superior |
O deslocamento da parte superior da barra de controle. |
margem esquerda |
A distância até o botão seguinte à esquerda ou ao lado esquerdo da barra de controle, se este for o primeiro botão em uma linha. |
width |
A largura do botão de sumário. |
altura |
A altura do botão de sumário. |
background-image |
A imagem que é exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites . |
Este botão suporta o seletor de atributos state
, que pode ser usado para aplicar diferentes capas a diferentes estados de botão.
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 - configure um botão de sumário posicionado a 4 pixels da parte inferior e a 43 pixels da esquerda da barra de controle principal; é 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 pelo seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel
Propriedades de CSS do painel suspenso
cor de 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 projetada ao redor do painel. |
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 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 do item individual é controlada com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item
Propriedades de CSS do item
família de fontes |
Nome da fonte. |
font-size |
Tamanho da fonte. |
altura |
Altura do item. |
revestimento |
Preenchimento interno. |
O item de lista suspensa suporta o seletor de atributos state
, que pode ser usado para aplicar diferentes capas ao passar o mouse e aos estados selecionados do item.
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 de 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 da página e o rótulo da página. |
É possível ocultar o índice de página totalmente definindo display:none
para a classe s7index
CSS.
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 de 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;
}
Se houver mais itens que possam caber verticalmente no painel suspenso e o sistema for uma área de trabalho, o componente renderizará 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 de CSS da barra de rolagem
largura |
A largura da barra de rolagem. |
top |
A barra de rolagem vertical é deslocada da parte superior da área do painel. |
bottom |
A barra de rolagem vertical é deslocada da parte inferior da área do painel. |
right |
A barra de rolagem horizontal é deslocada da borda direita da área do painel. |
Exemplo - configure uma barra de rolagem que tenha 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;
}
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 .s7tableofcontents .s7scrollbar .s7scrolltrack
Propriedades de CSS da faixa de rolagem
largura |
A largura da faixa. |
cor de fundo |
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:
.s7ecatalogsearchviewer .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 faixa. 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 de CSS da miniatura da barra de rolagem
largura |
A largura do polegar. |
altura |
A altura do polegar. |
tampa superior |
O preenchimento vertical entre a parte superior da faixa. |
camada inferior |
O preenchimento vertical entre a parte inferior da faixa. |
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 . |
A miniatura suporta o seletor de atributos state
, que pode ser usado para aplicar diferentes capas aos estados de miniatura up
, down
, over
e disabled
.
Exemplo - configure uma barra de rolagem que tenha 28 x 45 pixels, margens de 10 pixels na parte superior e inferior e 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 de CSS do botão de rolagem para cima e para baixo
largura |
A largura do botão. |
altura |
A altura do botão. |
background-image |
A imagem que é exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites . |
O botão suporta o seletor de atributos state
, que pode ser usado para aplicar diferentes capas aos estados dos 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 - configure botões de rolagem que têm 28 x 32 pixels e 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);
}