Função

A barra de navegação é um componente que já vem por padrão na tela home.view.html e será visível por todas as outras páginas, facilitando a navegação entre as páginas do sistema web. Ela também pode ser alterada para o menu vertical.A barra de navegação possui menus que por sua vez possuem itens, e tanto itens quanto menus possuem as mesmas configuraçõesa posição vertical.

Image Modified

Figura 1.1 - Barra de navegação exibida em um browser

O componente barra de navegação é responsivaresponsivo, ou seja, em telas pequenas ele muda o seu formato , criando do menu para um botão de menu sanduíche que exibe um menu, melhorando a usabilidade para o usuário.

Image Modified

Figura 1.2 - Barra de navegação em um browser sendo exibido em uma tela menor

Ela é composta dos componentes Imagem (Destaques 1 e 3 da figura 1.3), Menu Dinâmico (2) e Item de Menu agrupados.

Image Added

Figura 1.3 - Componentes presentes na barra de navegação.

Propriedades do componente

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Barra de navegação.

Configuração

A propriedade configuração agrupa a maioria das propriedades deste componente, como inserção dos menus e itens, define os rótulos, a segurança e outros.

Ao selecionar o componente na área de edição de páginas, você poderá acessar a aba de propriedades no lado direito da tela. O botão "..." que aparece ao lado do campo Configuração (Figura 2.1) permite que você abra Para acessar a janela Opções de Menu, selecione o componente no editor visual e clique no botão "..." que aparece ao lado do campo Configuração (Figura 2.1). que pertence ao subcomponente Menu Dinâmico. 

Figura 2.1 - Janela de opções do menu dinâmico

1. Adicionar novo item ou menu;

2. Excluir o item ou menu selecionado;

3. Área que exibe a árvore hierárquica para seleção dos itens e menus;

4. Propriedades do menu ou item selecionado.

Hierarquia dos menus

A barra de navegação pode ser definida em níveis quando se encontra no modo de configuração. O nível 0 (Principal) é a barra de navegação em si. Após isso, vem o(s) menu(s) da barra que se encontram no nível 1, e por fim, vem o(s) item(ns) desse(s) menu(s), que se encontram no último nível, nível 2.

Podemos ter um item no nível 1, mas se criarmos um item logo abaixo dele (nível 2), ele virará automaticamente um menu.

Após o nível 2 não é possível adicionar mais itens, ou seja, os itens do nível 2 não podem ter subitens. No entanto, não existe limites para criação de menu e itens na barra de navegação.

Image Removed

Figura 2.2 - Níveis de profundidade dos menus

Criar menu ou item

Para criar um menu ou item de nível 1, selecione Principal (nível 0) e clique em + (Adicionar item), informe um nome na janela que será exibida e clique em OK. (Figura 2.3)

Image Removed

Figura 2.3 - Processo para criação de menu/item nível 1

Para adicionar um item de nível 2, faça o mesmo procedimento informado acima, porém, ao invés de selecionar Principal, selecione o menu onde deseja criar o item de nível 2 e clique em + (Adicionar item). (Figura 2.4)

Image Removed

Figura 2.4 - Processo para criação de item nível 2

Remover menu ou item

Para excluir um item ou menu, selecione-o na arvore hierárquica e clique no botão Remover, finalize clicando em OK na janela de confirmação.

Opções do menu ou item

A tabela abaixo exibe a função de cada uma das propriedades da janela de opções

Nome

Função

Nome

Identifica o item ou menu da árvore hierárquica.

Título

Rótulo que será exibido no menu ou item.

Ícone

Ícone que será exibido no lado direito do rótulo.

Oculto

Permite ocultar o menu ou item da barra de navegação através de uma expressão ou bloco de programação.

Ação

Define alguma ação a ser tomada no clique.

*Não é necessário adicionar nenhuma ação para expandir os itens nos menus.

Segurança

Define os grupos de acesso que poderão visualizar e acessar os itens ou menus.

Alterar imagens

É possível alterar as imagens da barra de navegação:

• A imagem do perfil do usuário (destaque 3 da figura 1.3) está vinculada ao campo Picture da classe User, dessa forma, exibirá a foto do usuário quando o perfil estiver preenchido ou uma imagem padrão, caso o campo esteja vazio.
• Já a imagem do Logo pode ser alterada selecionando-a e alterando a propriedade Origem do componente Imagem.

Abaixo (Figura 2.2), mostraremos como alterar a imagem da logo na barra de navegação.

Image Added

Figura 2.2 - Alterando imagem

1. No editor de views, selecione a imagem da logo;
2. No campo Origem na aba de Propriedades do componente, clique em Editar expressão;

3. Agora, é possível alterar a imagem por meio do endereço da árvore de arquivos

Image Removed

Figura 2.5 - Opções das propriedades

1. Abre a janela para tradução dos rótulos do item ou menu selecionado;

2. Exibe o ícone selecionado para o menu ou item;

3. Abre a janela de configuração da propriedade selecionada;

4. Limpa o campo da propriedade selecionada.

Posição

A propriedade Posição define como será exibida a barra de navegação: na parte superior do site (horizontal) ou na lateral esquerda (vertical).

Da mesma forma como ocorre no menu horizontal, em telas pequenas a barra de navegação muda o seu formato, criando um botão sanduíche que exibe o menu ao clica-lo, melhorando a usabilidade para o usuário (Figura 12.23).

Image Modified

Figura 2.6 2 - Barra de navegação na posição vertical