Menu Dinâmico
Função
O componente Menu Dinâmico permite 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.
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).
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. |
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. |
Configuração
Ao arrastar o componente para a área de edição aparecerá a janela Opções de Menu, configure-a seguindo os passos abaixo. Você também poderá acessá-la pela aba de Propriedades, que aparece do lado direito da tela ao selecionar o componente, clicando no botão "..." no campo Configurações (Figura 2).
Figura 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.
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.
Figura 2.1 - Níveis de profundidade dos menus
Criar item
Para criar um 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.2). Clique e arraste o item criado para reordená-lo.
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.
Figura 2.2 - Processo para criação de item nível 1
Remover item
Para excluir um item ou menu, selecione-o na árvore hierárquica e clique no botão Remover. Finalize clicando em OK na janela de confirmação (Figura 2.3).
Atenção
Ao excluir um item, todos os seus subitens serão excluídos.
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. |
Para saber mais sobre a segurança no Cronapp, acesse a documentação Permissão de Segurança.
Figura 2.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.
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.
Figura 3 - Adicionando um item ao menu através do Drag and Drop
Nome em inglês
Dynamic Menu
Nesta página
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual
Assista sobre o tema no Cronapp Academy
Caso seja seu primeiro acesso ao Cronapp Academy, crie antes uma conta gratuita e matricule-se no curso abaixo.
Aula: CRUD Web