Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Hoje vou mostrar como usar o menu gaveta do Axure. No menu gaveta, dois efeitos interativos precisam ser alcançados, a saber:

Interação um

O efeito de escala dos itens de menu de nível 1 e nível 2 no menu da gaveta

Lógica de implementação: configuração do estado de comutação do painel dinâmico e implementação "empurrar/puxar o original"

Interação 2

Alternando o estado selecionado de um item de menu

Implementar lógica: definir o estado selecionado na visualização auxiliar

Vamos dar uma olhada nas etapas de implementação:

Interação 1: Efeito de escala dos itens de menu de nível 1 e nível 2 no menu da gaveta

passo 1

1. Arraste um painel dinâmico e ajuste o tamanho do painel dinâmico.

2. Clique duas vezes no painel dinâmico, defina o nome do painel dinâmico: "Menu 1", adicione 2 estados do painel dinâmico, nomeados respectivamente: Recolher, Expandir

Passo 2

1. Clique duas vezes no estado dobrado para entrar na página de status "dobrado"

2. Arraste um retângulo para dentro da página e defina o nome como “Menu 1-Recolher”. Redimensione o Menu 1 e digite o texto "Menu 1".

3. Arraste a imagem da seta suspensa e ajuste o tamanho

etapa 3

Adicione os estilos de mouseover e seleção do "Menu 1-Collapse" e defina a cor da fonte: azul e cor de preenchimento: cinza claro, respectivamente.

Passo 4

Caso de uso ao definir o clique do mouse no retângulo "Menu 1-Collapse":

Selecione a ação "Alternar estado do painel", defina o "Menu 1" para mudar para o estado "Expandido" e selecione o atributo "Componente push/pull".

Etapa 5

1. Copie o conteúdo do estado "recolher" do painel dinâmico para a página de estado "expandido"

2. Na página de status “Expandir”, altere o nome do retângulo para “Menu 1-Expandir”.

Interação 2: Mudando o estado selecionado dos itens de menu

Etapa 6

1. Copie "Menu 1-Expandir" como um submenu, modifique o texto do nome do componente e nomeie-o: Submenu 1

2. Defina o evento de clique do mouse do submenu 1, selecione a ação "Definir Selecionado" e configure o componente atual a ser selecionado.

Etapa 7

1. Copie vários submenus em lotes, modifique o texto e nomeie-os respectivamente.

2. Após selecionar todos os vários submenus, defina o nome do grupo de seleção: 1

Visualize para ver o efeito.