Função
A barra de navegação é um componente que já vem por padrão na tela menu.view.html e será visível por todas as outras páginas, 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 - Componente sendo executado pelo Cronapp Browser
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
A propriedade configuração 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;
Propriedades do item selecionado.
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 menu e itens na barra de navegação.
Figura 2.2 - Níveis de profundidade dos menusitens
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 uma das propriedades da aba opções da janela de opções.
| Nome | 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. |
| Informações |
|---|
Para saber mais sobre Permissão de Segurança, acesse o link: Configuração da Permissão de Segurança |
Figura 2.5 - Opções das propriedades
Abre a janela para tradução dos rótulos do item ou menu selecionado;
Exibe o ícone selecionado para o menu ou 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 uma das propriedades da aba adicional da janela de opções.
| Nome | 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
Índice
Compatibilidade
Formulário mobile
Equivalente web