Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Função

A barra de navegação do mobile é um componente que já vem por padrão na tela menu (localização: Formulários/Mobile/Autenticado/ 

Tooltip
onlyIcontrue
appendIconinfo-circle

Endereço: src/main/mobileapp/www/views/logged/menu.view.html

) será exibido sempre que o usuário tocar no ícone sanduíche (lado esquerdo ou direito) do cabeçalho da aplicação, facilitando a navegação entre as páginas do sistema mobile. Essa barra possui itens, que serão os links para as outras páginas.


Figura 1 - A barra de navegação é exibida ao clicar no ícone sanduíche

Propriedades do componente

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

NomePropriedadeFunção
ConfiguraçãooptionsAbre a janela de configurações da barra de navegação.
TítulocontentDefine um rótulo.
IdentificadoridAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
Classes CSSclassAdiciona classes CSS que já foram criadas.
EstilostyleAltera o estilo do componente da forma inline.
Exibir

ng-show

Propriedade Angular usada para mostrar ou oculta o componente.

Repetircrn-repeatPropriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.

Segurança

cronapp-security

Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados.

Configuração

Essa janela agrupa a maioria das propriedades deste componente, como inserção dos itens, definição dos rótulos, da segurança e outros.

Ao selecionar o componente na área de edição de páginas (destaque 1 da figura 2.1), você poderá acessar a aba de propriedades no lado direito da tela. O botão "..." que aparece ao lado do campo Configuração permite que você abra a janela Opções de Menu (Figura 2.1).


Figura 2.1 - Janela de opções do menu


  1. Componente Barra de navegação na tela de menu mobile;
  2. Adicionar novo item;

  3. Excluir o item selecionado;

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

  5. Exibe as propriedades do item selecionado na árvore (3). Possui as abas:

Hierarquia dos itens

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) item(ns) dessa barra, que se encontram no nível 1.

Após o nível 1 não é possível adicionar mais itens, ou seja, os itens do nível 1 não podem ter subitens - se criarmos um item logo abaixo dele, ele virará automaticamente um item do nível 0. No entanto, não existe limites para criação de itens na barra de navegação.


Figura 2.2 - Níveis de profundidade dos itens

Criar item

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


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

Remover item

Para excluir um item, selecione-o na árvore hierárquica, e clique no botão Remover (destaque 1 na Figura 2.4), finalize clicando em OK na janela de confirmação (2).


Figura 2.4 - Processo de remoção do item nível 1

Âncora
aba-opcoes
aba-opcoes

Aba Opções 

A tabela abaixo exibe a função de cada campo da aba Opções. Cada item da árvore hierárquica exibe uma configuração diferente, clique sobre um item para atualizar os campos da aba opções:

CampoFunção

Nome

Identifica o item da árvore hierárquica.

Título

Rótulo que será exibido no item.

Ícone

Ícone que será exibido à esquerda do rótulo.

Oculto

Permite ocultar o 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.

Segurança

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

Informações

Para saber mais sobre as configurações de Segurança, acesse o link: Permissão de Segurança


Figura 2.5 - Opções das propriedades


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

  2. Exibe o ícone selecionado para o item;

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

  4. Limpa o campo da propriedade selecionada.

Âncora
aba-adicional
aba-adicional

Aba Adicional

A tabela abaixo exibe a função de cada campo da aba Adicional. Cada item da árvore hierárquica exibe uma configuração diferente, clique sobre um item para atualizar os campos da aba Adicional:

CampoFunção
Posição do TextoDefine a posição do texto do item selecionado, podendo ser na esquerda, no centro ou na direita
Posição do ÍconeDefine a posição do ícone do item selecionado, podendo ser na esquerda ou na direita
Tema do Ícone

Define o tema do ícone do item selecionado. 

Opções:

  • Assertive: vermelho
  • Balanced: verde
  • Energized: amarelo
  • Calm: azul claro
  • Positive: azul escuro
  • Royal: roxo
  • Dark: preto
  • Ligth e Stable: branco
Tema do Texto

Define o tema do texto do item selecionado. 

Opções:

  • Assertive: vermelho
  • Balanced: verde
  • Energized: amarelo
  • Calm: azul claro
  • Positive: azul escuro
  • Royal: roxo
  • Dark: preto
  • Ligth e Stable: branco


Figura 2.6 - Aba adicional da janela de opções

Nome em inglês

Navbar


Nesta página

Índice


Compatibilidade

  • Formulário mobile


Equivalente web

Barra de navegação (web)


Imagem no Editor Visual

Image Added