Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Comentário: DI-2772

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).


Image Added

Figura 1.1 - Menu Dinâmico responsivo

Principais propriedades

Propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

NomePropriedadeFunção
Identificadorid
ID do componente.Ação do multinívelmultilevel-action

Define como será expandido os submenus após o clique do primeiro nível.

  • Ao passar o mouse: (padrão) o menu filho (ou o item) será expandido ao posicionar o cursor do mouse sobre o menu pai.
  • Clique: o menu filho será expandido ao clicar sobre o menu pai
    Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
    ConfiguraçãooptionsAbre a janela de configuração do Menu Dinâmico.
    Valor alternativocontentValor alternativo do componente.
    Classes CSSclass

    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 Menu Dinâmico.

    NomePropriedadeFunçã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

    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


    1. Adicionar novo item ou menu;

    2. Excluir o item ou menu selecionado;

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

    4. Propriedades do menu ou item selecionado.

    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
    titleDica

    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

    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.


    Dica

    Também é possível adicionar elementos ao menu arrastando itens da árvore de recursosarquivos, veja mais detalhes no tópico Drag and Drop da árvore de recursosarquivos.


    Figura 2.2 - Processo para criação de item nível 1

    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).

    Nota
    titleAtenção

    Ao excluir um item, todos os seus subitens serão excluídos.


    Figura 2.3 - Removendo 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 a documentação Permissão de Segurança.


    Figura 2.4 - Opções das propriedades


    1. Abre a janela para tradução dos rótulos do item ou menu selecionado;

    2. Exibe o ícone selecionado para o menu ou item;

    3. Abre a janela de configuração da propriedade selecionada;

    4. Limpa o campo da propriedade selecionada.

    Âncora
    dragDropRecursos
    dragDropRecursos

    Drag and

    Drop

    Drop da árvore de

    recursos

    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 da árvore de recursos, arraste e solte-o na área de edição do formulário, 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".

    info

    Esse recurso

    só estará disponível ao desabilitar o

    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

    Índice


    Compatibilidade

    • Formulário web

    Equivalente mobile

    Não possui.


    Botão do Componente



    Imagem no Editor Visual


    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.