Criar modais em Construtor de IU

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 3 min. de leitura

    • Use modais em Construtor de IUcom componentes para fornecer alertas ou chamadas à ação para um usuário. Construtor de IUvem com modais para economizar tempo e esforço.

    Quais são modais

    Os modais, também conhecidos como caixas de diálogo, são janelas que se sobrepõem a outra janela de conteúdo. Os modais assumem o controle da experiência do usuário. Os usuários não podem interagir com a janela sobreposta até que o modal seja fechado. Os modais podem conter diferentes tipos de conteúdo, como:
    • Texto estático
    • Texto dinâmico
    • Formulários
    • Imagens
    • Botões

    Construtor de IU tem modais pré-configurados disponíveis. Você pode adicionar um modal ao seu componente. Em seguida, configure o conteúdo do modal e como ele é exibido na tela. Adicione um manipulador de eventos ao modal para executar uma ação quando um usuário selecioná-la. A ação pode alertar um usuário sobre algo ou solicitar que um usuário confirme uma ação. Um modal é uma maneira de garantir que um usuário saiba o que está acontecendo. Por exemplo, um modal pode solicitar que um usuário confirme uma seleção antes de continuar qualquer ação que ele esteja executando na página principal.

    Anatomia modal

    Modais em Construtor de IUpode ter:
    • Cabeçalho modal
    • Conteúdo modal
    • Botão Fechar caixa de diálogo (nenhuma ação realizada pelo modal)
    • Pelo menos um botão modal (a ação pode ser realizada pelo modal)

    Diagrama mostrando as diferentes partes dos modais.

    Tipos de modais

    Diferentes tipos de modais estão disponíveis em Construtor de IU, conforme mostrado na tabela a seguir.

    Tipo de modal Descrição
    Alerta Um modal de alerta fornece informações relacionadas à ação do componente. Por exemplo, quando um usuário pressiona um botão de exclusão, você pode ter um pop-up de alerta que informa ao usuário que não pode desfazer uma ação de exclusão.
    Confirmar Um modal Confirmar solicita que um usuário confirme a ação do componente. Por exemplo, quando um usuário pressiona um botão de exclusão, o usuário precisa confirmar a exclusão de dados. Você pode escolher as opções Confirmar nos campos de rótulo do botão primário e secundário, como Sim/Cancelar.
    Confirmar e destruir Um modal Confirmar e destruir é mais diretiva, geralmente relacionada a excluir ou apagar conteúdo. Ele permite que o usuário saiba a gravidade de uma ação e pergunta se ele deseja prosseguir com a ação.
    Personalizado Modais personalizados abordam cenários que não são manipulados usando os modais padrão. Os modais personalizados podem ser considerados como um componente de contêiner em um modal. Você pode adicionar um layout personalizado, componentes, eventos e recursos de dados da mesma forma que faz em uma página. O modal personalizado usa layouts para permitir que você projete totalmente as informações desejadas no modal. Os layouts também decidem onde as informações ficam na tela modal. Você pode usar o estilo de Folhas de estilo em cascata (CSS) para mudar a aparência visual do modal.
    iframe Use o iframe para trazer para o modal o conteúdo do iframe existente de um URL e dados.
    Viewport modal Passe dinamicamente o conteúdo para o modal da janela de visualização por meio de uma vinculação de evento usando um script de cliente.

    Modais e manipuladores de eventos

    Exponha eventos a modais para lidar com eventos de call-to-action. Por exemplo, uma ação primária, ação secundária e assim por diante. Você configura os dados adicionando um manipulador de eventos e invocando um recurso de dados. É tão simples quanto adicionar um novo manipulador de eventos para o componente que tem um modal. Ou você pode adicionar um manipulador de eventos ao modal em si. Você seleciona o evento que deseja associar ao componente ou modal e o adiciona. Consulte Adicione modal ao componentepara obter instruções detalhadas.