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.view.html e será visível por todas as outras páginas (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 barra possui itens, que serão os links para as outras páginas.


Image Modified

Figura 1 - Componente sendo executado pelo Cronapp BrowserA 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.
Classes CSSclassAdiciona 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 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 campo Configuração permite  permite que você abra a janela Opções de Menu (Figura 2.1).

Image Modified

Figura 2.1 - Janela de opções do menu

  1. Adicionar novo item;

  2. Excluir o item selecionado;

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

  4. Propriedades 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 selecione Principal (nível 0) e clique em em + (Adicionar item), informe um nome na janela que será exibida e clique em 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 no botão Remover, finalize clicando em 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 uma das propriedades 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 da janela de opções.:

CampoNomeFunçã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 as configurações de Segurança, acesse o link: Configuração da Permissão de Segurança


Image Modified

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 uma das propriedades da aba adicional da janela de opções.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:

CampoNomeFunçã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 ÍconeDefine o tema do ícone do item selecionado, podendo ser: assertive, balanced, energized, light, stable, calm, positive, royal ou dark.
Tema do TextoDefine o tema do texto do item selecionado, podendo ser: assertive, balanced, energized, light, stable, calm, positive, royal e dark.


Image Modified

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

Barra de navegação (web)