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 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: |
) na tela home 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 pode ser alterada para a posição vertical.
Image RemovedImage Added
Figura 1. 1 - Barra de navegação exibida em um browser
O componente barra Barra de navegação é responsivo, ou seja, em telas pequenas ele muda o seu formato do menu para um botão de menu para 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
Ela é composta dos componentes Imagem (Destaques 1 e 3 da Como destacado na figura 1.3), Menu Dinâmico (2) e Item de Menu agrupados.2, o componente possui 3 subcomponentes.
Image AddedImage Removed
Figura 1.3 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 |
---|
Identificador |
options
id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. | |
xattr-class | Define |
Identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
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. |
Configuração
O campo Configuração (Figura 2.1) permite que você abra a janela Opções de Menu que pertence ao subcomponente Menu Dinâmico.
Image Removed
Figura 2.1 - Janela de opções do menu dinâmico
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.
Dica | ||
---|---|---|
| ||
Um item possui apenas um nível e o menu possui itens dentro dele. Por exemplo, o menu Admin possui os itens: usuários, log de auditoria e grupos. |
Alterar imagens
É possível alterar as imagens da barra de navegação:
- A imagem do perfil do usuário (destaque 3 da figura 1.3) está vinculada ao campo Picture da classe User, dessa forma, exibirá a foto do usuário quando o perfil estiver preenchido ou uma imagem padrão, caso o campo esteja vazio.
- Já a imagem do Logo pode ser alterada selecionando-a e alterando a propriedade Origem do componente Imagem.
Abaixo (Figura 2.2), mostraremos como alterar a imagem da logo na barra de navegação.
Image Removed
Figura 2.2 - Alterando imagem
- No editor de views, selecione a imagem da logo;
- No campo Origem na aba de Propriedades do componente, clique em Editar expressão;
Agora, é possível alterar a imagem por meio do endereço da árvore de arquivos.
Posição
A propriedade Posição define como será exibida a barra de navegação: na parte superior do site (horizontal) ou na lateral esquerda (vertical).
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 2.3).
Image Removed
Âncora | ||||
---|---|---|---|---|
|
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).
- 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 - 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 Figura 2.2 - Barra de navegação na posição vertical
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 VisualImage Removed
Image 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