- Criado por Deborah Melo de Carvalho, última alteração em 03/12/2020
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 9 Próxima »
Função
A barra de navegação do mobile é um componente que já vem por padrão na tela menu.view.html (localizado em src/main/mobileapp/www/views/logged/
) 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.
Nome | Propriedade | Função |
---|---|---|
Configuração | options | Abre a janela de configurações da barra de navegação. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Exibir | ng-show | Propriedade AngularJS usada para mostrar ou oculta o componente. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
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, 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
Adicionar novo item;
Excluir o item selecionado;
Área que exibe a árvore hierárquica para seleção dos itens;
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 + (Adicionar item), informe um nome na janela que será exibida e clique em OK (Figura 2.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, finalize clicando em OK na janela de confirmação (Figura 2.4).
Figura 2.4 - Processo de remoção do item nível 1
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:
Campo | Função |
---|---|
Nome | Identifica o item da árvore hierárquica. |
Título | Rótulo que será exibido no item. |
Ícone | Ícone que será exibido no lado direito 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. |
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
Abre a janela para tradução dos rótulos do item selecionado;
Exibe o ícone selecionado para o item;
Abre a janela de configuração da propriedade selecionada;
Limpa o campo da propriedade selecionada.
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:
Campo | Função |
---|---|
Posição do Texto | Define a posição do texto do item selecionado, podendo ser na esquerda, no centro ou na direita |
Posição do Ícone | Define 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, podendo ser: assertive, balanced, energized, light, stable, calm, positive, royal ou dark. |
Tema do Texto | Define o tema do texto do item selecionado, podendo ser: assertive, balanced, energized, light, stable, calm, positive, royal e dark. |
Figura 2.6 - Aba adicional da janela de opções
Nome em inglês
Navbar
Nessa página
Compatibilidade
Formulário mobile
Equivalente web
- Sem rótulos