MockStudioBuscar
← Guia
Editar o mockup

Ações e navegação

Vídeo · Ações e modais sem código · 1min13s

Nenhuma ação vem pronta: você decide o que acontece ao clicar em cada coisa. Exemplo clássico: na tela de login, clicar em Entrar leva para a página inicial do sistema.

Jeito 1 — Assistente de ações (recomendado)

Clique em ⚡ Criar ação (barra acima da página), clique no elemento, escolha o que acontece e o destino. O assistente lista as páginas, modais, menus e abas que encontrou na tela. Veja Assistente de ações.

Jeito 2 — Selecionando

  1. Abra a página de origem (ex.: Login).
  2. Selecionar (E) → clique no botão Entrar.
  3. No painel Elemento, clique em Ir para página… e escolha o destino (as páginas aparecem numeradas).

Pronto: o Claude cria a ação. Volte para Visualizar (V) e teste.

Jeito 3 — Só pelo chat

  • Na página 1, ao clicar no botão Entrar, ir para a página 2.
  • Ao clicar na linha da tabela, ir para a página Detalhes do cliente.
  • Ao clicar no ícone de lixeira, abrir um modal de confirmação.

Funciona com qualquer coisa clicável: botão, link, ícone, linha de tabela, item de menu.

Se faltar informação

Se você disser só "crie uma ação neste botão", o Claude pergunta qual ação (ir para página, abrir modal, mostrar aviso…) e, se for navegação, para qual página, listando as páginas numeradas.

Ações disponíveis

Ação Exemplo de pedido
Ir para outra página "ao clicar, ir para a página 3"
Abrir modal "ao clicar, abrir um modal com…" (Criar modais)
Mostrar/esconder um bloco "ao clicar em Filtros, mostrar o painel de filtros"
Aviso simulado "ao clicar em Salvar, mostrar 'Salvo com sucesso'"
Trocar de aba "faça as abas Dados/Endereço funcionarem"

Formulários nunca enviam de verdade: ao enviar, aparece "Formulário enviado (simulação)", a menos que você peça outra ação.

Próximo tópicoCriar modais