Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
A barra de navegação é um componente que já vem por padrão na tela nas páginas home privada (Localização: Formulário/Web/Autenticado/
Tooltip | ||||
---|---|---|---|---|
| ||||
Endereço: |
) ou home pública (Localização: Formulário/Web/Público/
Tooltip | ||||
---|---|---|---|---|
| ||||
Endereço: |
) e será visível por todas as outras páginas, facilitando a navegação entre as páginas do sistema da aplicação web. Ela também pode ser alterada para o menu a posição vertical.
A barra de navegação possui menus que por sua vez possuem itens, e tanto itens quanto menus possuem as mesmas configurações.
Image Removed
Image Added
Figura Figura 1. 1 - Barra de navegação exibida em um browser
A O componente barra Barra de navegação é responsivaresponsivo, ou seja, em telas pequenas ele muda o seu formato , criando um botão sanduíche que exibe um menupara menu vertical que é exibido ao clicar no botão sanduíche, melhorando a usabilidade para o usuário (Figura 1.1).
Image RemovedImage Added
Figura 1.2 1 - Barra de navegação em um browser sendo exibido na posição horizontal sendo exibida em uma tela menor
Como destacado na figura 1.2, o componente possui 3 subcomponentes.
Image Added
Figura 1.2 - Componentes presentes na barra de navegação
- Imagem, contém a logomarca da aplicação.
- Menu Dinâmico, por padrão, o primeiro menu direcionar o usuário para as outras páginas da aplicação, enquanto o segundo possui o modal de alteração de senha do usuário e a opção de logoff na aplicação.
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. | |
Posição | xattr-class | Define se a barra ficará horizontalmente, na parte superior da tela, ou verticalmente, na lateral esquerda. | |
Identificador | identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Configuração
A propriedade configuração agrupa a maioria das propriedades deste componente, como inserção dos menus e itens, define os rótulos, a 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
Para acessar a janela Opções de Menu, selecione o componente no editor visual e clique no botão "..." que aparece ao lado do campo Configuração (Figura 2.1).
Image RemovedFigura 2.1 - Janela de opções do menu
Adicionar novo item ou menu;
Excluir o item ou menu selecionado;
Área que exibe a árvore hierárquica para seleção dos itens e menus;
Propriedades do menu ou item selecionado.
Hierarquia dos menus
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) menu(s) da barra que se encontram no nível 1, e por fim, vem o(s) item(ns) desse(s) menu(s), que se encontram no último nível, nível 2.
Podemos ter um item no nível 1, mas se criarmos um item logo abaixo dele (nível 2), ele virará automaticamente um menu.
Após o nível 2 não é possível adicionar mais itens, ou seja, os itens do nível 2 não podem ter subitens. No entanto, não existe limites para criação de menu e itens na barra de navegação.
Image RemovedFigura 2.2 - Níveis de profundidade dos menus
Criar menu ou item
Para criar um menu ou 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)
Image RemovedFigura 2.3 - Processo para criação de menu/item nível 1
Para adicionar um item de nível 2, faça o mesmo procedimento informado acima, porém, ao invés de selecionar Principal, selecione o menu onde deseja criar o item de nível 2 e clique em + (Adicionar item). (Figura 2.4)
Image RemovedFigura 2.4 - Processo para criação de item nível 2
Remover menu ou item
Para excluir um item ou menu, selecione-o na arvore hierárquica e clique no botão Remover, finalize clicando em OK na janela de confirmação.
Nota |
---|
ATENÇÃO Ao excluir um menu, todos os seus itens serão excluídos. |
Opções do menu ou item
A tabela abaixo exibe a função de cada uma das propriedades da janela de opções
Nome
Função
Nome
Identifica o item ou menu da árvore hierárquica.
Título
Rótulo que será exibido no menu ou item.
Ícone
Ícone que será exibido no lado direito do rótulo.
Oculto
Permite ocultar o menu ou 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.
*Não é necessário adicionar nenhuma ação para expandir os itens nos menus.
Segurança
Define os grupos de acesso que poderão visualizar e acessar os itens ou menus.
xattr-class | Define uma das três posições da barra de navegação: Horizontal, Vertical e Vertical retrátil. | |
Tipo de menu retrátil | menu-type | Define se o ícone do menu será "hambúrguer" ou "seta". |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
Index da tabela | tabindex | Atributo do tipo numérico, ele especifica a ordem que o componente será selecionado quando a navegação é através da tecla TAB do teclado. |
Repetir | crn-repeat | Propriedade 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 | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classe CSS | class | Adiciona classes CSS que já foram criadas. |
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Barra de navegação.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Plano de Fundo | Background | Estiliza o plano de fundo do componente. |
Menu Marca | Brand Menu | Estiliza o do componente. |
Item Menu | Menu Item | Estiliza o menu de marca do componente. |
Item Selecionado | Hover Subitem | Estiliza o item selecionado do menu. |
Subitem | Subitem | Estiliza o subitem do componente. |
Âncora | ||||
---|---|---|---|---|
|
Informações |
---|
Para saber mais sobre a segurança no Cronapp, 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 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.
Posição
A propriedade Posição define como será exibida a barra de navegação e funciona de forma semelhante ao que ocorre quando a Barra de navegação no formato horizontal é acessado por telas pequenas. Possui as seguintes opções:
- Horizontal: barra na parte superior do site (
- figura 1);
- Vertical: barra na lateral esquerda (
- figura 2).
Da mesma forma como ocorre no menu horizontal, em telas pequenas a barra de navegação muda o seu formato, criando um botão sanduíche que exibe o menu ao clica-lo, melhorando a usabilidade para o usuário (Figura 1.2).
Image Removed
- Vertical Retrátil: barra na lateral esquerda com um ícone de seta ou menu hambúrguer para expandir ou recolher o menu (figura 2.1)
Image Added
Figura 2 - Barra de navegação na posição vertical
Image Added
Figura 2.1 Figura 2.6 - Barra de navegação na posição vertical retrátil
Alterar imagem
Para alterar a imagem que representa o logo da aplicação, clique sobre o subcomponente Imagem (destaque 1 da figura 2.2) e, em seguida, no botão "..." da propriedade Origem (destaque 2) para abrir a janela contendo as imagens da aplicação web. Também é possível informar um endereço de imagem diretamente no campo, veja mais detalhes na documentação do componente.
Image Added
Figura 2.2 - Alterando imagem
Nome em inglês
Navbar
Nessa página
Índice maxLevel 3 printable false
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Image RemovedImage Added
Imagem no Editor Visual
Image RemovedImage Added
Assista sobre o tema no Cronapp Academy
Informações |
---|
Caso seja seu primeiro acesso ao Cronapp Academy, crie antes uma conta gratuita e matricule-se no curso abaixo. |
- Aula: CRUD Web