Barra de controle principal

A barra de controle principal é a área retangular em sistemas de desktop e tablets que contêm todos os controles da interface do usuário (exceto botões Página grande) disponíveis para o visualizador eCatalog.

Em telefones celulares, ainda mantém os botões Miniaturas, Índice, Download, Imprimir, Favoritos, Compartilhamento em redes sociais, Tela cheia e Fechar. No entanto, os botões Primeira página e Última página e Indicador de página são removidos da barra de controle principal e adicionados à barra de controle secundária. Por padrão, a barra de controle principal é exibida na parte superior da área do visualizador em sistemas de desktop e telefones celulares e movida para a parte inferior da área do visualizador em tablets. Sempre leva a largura total do visualizador disponível. É possível alterar sua cor, altura e posição vertical no CSS, em relação ao container do visualizador.

A aparência da barra de controle principal é controlada com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7controlbar

Propriedade CSS

Descrição

top

Posição na parte superior do visualizador.

bottom

Posição na parte inferior do visualizador.

altura

A altura da barra de controle principal.

cor de fundo

A cor de plano de fundo da barra de controle principal.

Exemplo - para configurar uma barra de controle principal cinza com 36 pixels de altura e posicionada na parte superior do container do visualizador.

.s7ecatalogviewer .s7controlbar { 
 top: 0px; 
 height: 36px; 
 background-color: rgba(0, 0, 0, 0.5); 
}

A barra de controle principal suporta um recurso de rolagem opcional. Ela é ativada se a largura do visualizador for muito pequena e não houver espaço suficiente para ajustar todos os botões predefinidos na barra de controle. Nesse caso, um botão de seta de dois estados é exibido no lado direito da barra de controle. Clicar ou tocar nesse botão rola todos os elementos da barra de controle para a esquerda ou para a direita, dependendo do estado do botão de rolagem. O caso de uso principal desse recurso são dispositivos móveis com telas pequenas na orientação retrato.

O recurso de rolagem está ativado para a barra de controle principal e é desativado para a barra de controle secundária. O recurso é ativado e desativado usando o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

Propriedade CSS

Descrição

position

Quando definido como static , o recurso de rolagem será desativado.

Defina essa propriedade como absoluto para ativar o recurso de rolagem.

O botão de rolagem é adicionado a um elemento de container especial que posiciona o botão corretamente e permite estilizar a área ao redor do botão de forma diferente do restante do plano de fundo da barra de controle, caso a altura do botão de rolagem seja menor que a altura da barra de controle.

A aparência desse container de botão de rolagem é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

Propriedade CSS

Descrição

width

Normalmente deve ser igual ou maior que a largura do próprio botão de rolagem.

cor de fundo

Cor de fundo do container.

Você pode dimensionar e inserir a capa do botão de rolagem por meio do CSS.

A aparência desse botão é controlada com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

Propriedade CSS

Descrição

largura

Largura do botão.

altura

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 .

OBSERVAÇÃO

Este botão suporta os seletores de atributos state e selected, que podem ser usados para aplicar diferentes capas a diferentes estados de botão. Em particular, state="selected" corresponde ao estado inicial do botão de rolagem quando é possível rolar o conteúdo da barra de controle para a esquerda; state="default" corresponde ao estado em que o conteúdo é rolado completamente para a esquerda e o botão de rolagem sugere que ele retorne ao estado inicial.

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 ativar o recurso de rolagem na barra de controle principal para telefones celulares e configurar um botão de rolagem com 64 x 64 pixels que exibe uma imagem diferente para cada um dos 4 estados de botão diferentes quando selecionado ou não selecionado:

.s7ecatalogviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer { 
 position: absolute; 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer { 
 width:64px; 
 background-color: rgb(0, 0, 0); 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton { 
 width:64px; 
 height:64px; 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png); 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png); 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png); 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png); 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png); 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png); 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png); 
} 
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png); 
}

Nesta página