MockStudioBuscar
← Guia
Editar o mockup

Criar modais

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

Para criar uma janela (modal) que não existe no sistema, é só pedir. Diga:

  1. O conteúdo: título, campos, botões.
  2. Quando abre: em qual botão ou item clicar.

Exemplos

  • Crie um modal "Novo cliente" com os campos Nome, CPF, Cidade (combo com SP, RJ e MG) e os botões Salvar e Cancelar. Ele abre ao clicar em Novo cliente.
  • Ao clicar em Excluir, abrir um modal de confirmação: "Tem certeza que deseja excluir?" com Sim e Não.
  • Crie um modal de filtros com período (de/até) e status.

Dica: selecione o botão antes (E + clique) e diga só "ao clicar aqui, abra um modal com…".

O que o Claude faz

  • Cria o modal no mesmo padrão visual da página.
  • Liga ao botão indicado. Cancelar/Fechar, clicar fora e Esc fecham o modal.
  • Salvar pode fechar o modal e mostrar um aviso ao mesmo tempo (ex.: "Pedido salvo"). Peça assim: "ao clicar em Salvar, feche o modal e mostre o aviso Pedido salvo".
  • Combos do modal já abrem com os itens.
  • Campos de valor, CPF, CNPJ, telefone, CEP, data e hora já vêm com máscara (veja abaixo).
  • Registra a alteração para o documento do dev.

Se você não disser o conteúdo ou o botão, o Claude pergunta antes de criar.

Máscaras nos campos

Todo campo novo que o Claude cria já sai com a máscara certa. Você não precisa pedir.

Campo Como fica ao digitar
Valor (dinheiro) Da direita para a esquerda, como app de banco: digitar 1, 0, 0, 0 mostra R$ 10,00
CPF / CNPJ 000.000.000-00 / 00.000.000/0000-00
Telefone (00) 00000-0000 (ou 8 dígitos para fixo)
CEP 00000-000
Data / hora 00/00/0000 / 00:00

Se algum campo ficou sem máscara (ex.: um campo que veio da captura), selecione o campo e peça: "coloque máscara de valor neste campo".

Próximo tópicoPáginas novas