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 Low-Code: Formulários/Mobile/Autenticado/
Tooltip | ||||
---|---|---|---|---|
| ||||
|
) 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. |
Título | content | Define um rótulo. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Estilo | style | Altera o estilo do componente da forma inline. |
Exibir | ng-show | Propriedade AngularJS Angular usada para mostrar ou oculta o componente. | Identificador
Repetir | idcrn-repeat | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componentePropriedade 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 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
- Componente Barra de navegação na tela de menu mobile;
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.
Image Modified
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 (destaque 1 da Figura 2.3), informe um nome na janela que será exibida (2) e clique em em OK (Figura 2.3).
Image Modified
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 Removerno botão Remover (destaque 1 na Figura 2.4), finalize clicando em OK na na janela de confirmação (Figura 2.4).
Image Modified
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:
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 à 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 |
Image Modified
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.
Â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:
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.. Opções:
|
Tema do Texto | Define o tema do texto do item selecionado . Opções:
|
Image Modified
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