Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O componente Menu Dinâmico é usado para navegar nas páginas do seu projeto, com ele você pode organizar as páginas para que possa ter acesso. Como mostrado na Figura 1, ele é usado na barra de navegação do seu projeto.
Image RemovedFigura 1 - Exemplo do componente rodando no browserpermite gerenciar menus e seus itens, adicionando ações específicas para cada elemento, como abrir um novo formulário ou executar um bloco de programação. O Menu Dinâmico é um subcomponente da Barra de navegação (web) e, nesse contexto, é utilizado para facilitar o acesso as outras páginas da aplicação.
Image Added
Figura 1 - Exemplo do componente rodando no browser
O componente Menu Dinâmico é responsivo, ou seja, em telas pequenas ele muda o seu formato para um menu vertical, melhorando a usabilidade para o usuário (Figura 1.1).
Image Added
Figura 1.1 - Menu Dinâmico responsivo
Principais propriedades
Propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|---|---|
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 | options | Abre a janela de configuração do Menu Dinâmico. |
Valor alternativo | content | Valor alternativo do componente. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Menu Dinâmico.
Nome | Propriedade | Função |
---|---|---|
Geral | General | Estiliza o item principal do componente. |
Item aberto | Open item | Estiliza o Item principal que está aberto no componente. |
Subitem | Subitem | Estiliza o Subitem do componente. |
Plano de fundo do Subitem | Subitem Background | Estiliza o plano de fundo do Subitem do componente. |
Âncora menuConfiguracao menuConfiguracao
Configuração
Ao arrastar o componente na para a área de edição de páginas, já aparecerá a janela Opções de Menu, mas caso precise, você poderá acessar a aba de propriedades no configure-a seguindo os passos abaixo. Você também poderá acessá-la pela aba de Propriedades, que aparece do lado direito da tela . O ao selecionar o componente, clicando no botão "..." que aparece ao lado do campo Opções também permite que você abra (Figura 1.1no campo Configurações (Figura 2).
Image RemovedImage Added
Figura 1.1 2 - Configuração do Componente 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.
Hierarquia dos menus
O Menu Dinâmico pode ser definido em níveis quando se encontra no modo de configuração. O nível
- Nível 0 (
- principal): é o corpo do menu.
- Todos os itens ou menus serão criados dentro dele;
- Nível 1: é um item (ou menu) que se encontra dentro do menu de nível 0;
- Nível 2: é um item (ou menu) que se encontra dentro de menus dos níveis 1 e assim por diante até o nível 9.
Dica | ||
---|---|---|
| ||
Nas configurações do Menu dinâmico é possível criar itens com até 10 níveis de hierarquia. Apesar da possibilidade, não é recomendado o uso de tantos níveis, pois deixa o sistema com uma usabilidade ruim. |
Image Added
Figura 2.1
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 Removed
Figura 2.2 - Níveis de profundidade dos menus
Criar
menu ouitem
Para criar um menu ou 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.32)
Image Removed
Figura 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 Removed
. Clique e arraste o item criado para reordená-lo.
Dica |
---|
Também é possível adicionar elementos ao menu arrastando itens da árvore de arquivos, veja mais detalhes no tópico Drag and Drop da árvore de arquivos. |
Image Added
Figura 2.2 Figura 2.4 - Processo para criação de item nível 21
Remover
menu ouitem
Para excluir um item ou menu, selecione-o na arvore árvore hierárquica e clique no botão Remover, finalize . Finalize clicando em OK na janela de confirmação (Figura 2.3).
Nota | |||
---|---|---|---|
| ATENÇÃO
| ||
Ao excluir um menuitem, todos os seus itens subitens serão excluídos. |
Image Added
Figura 2.3 - Removendo item
Campos 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. |
Informações |
---|
Para saber mais sobre a segurança no Cronapp, acesse o link: a documentação Permissão de Segurança. |
Image RemovedImage Added
Figura 2.5 4 - 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.
Âncora dragDropRecursos dragDropRecursos
Drag and Drop da árvore de arquivos
Outra forma de adicionar item ao Menu dinâmico é a partir do recurso de Drag and Drop (arrastar e soltar). Selecione um formulário e solte-o na área de edição, em cima do componente Menu dinâmico (Figura 3). O menu de contexto Criar Componente será aberto, selecione a opção Formulário > (+) (destaque 1) para adicionar o item arrastado no nível 1 (no mesmo nível que "Home" e "Admin") ou navegue entre os menus de contextos para adicionar o item em outro local, por exemplo, Formulário > Home > (+) (destaque 2) e o item arrastado será de nível 2, dentro de "Home".
Esse recurso irá funcionar independentemente da configuração do Modo Avançado.
Image Added
Figura 3 - Adicionando um item ao menu através do Drag and Drop
Nome em
Nome em inglês
Dynamic
Menu
Nesta
páginapágina
Índice
Compatibilidade
- Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Image Added
Imagem no Editor Visual
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