Criar modais em Construtor de IU

  • Versão de lançamento: Xanadu
  • Atualizado 1 de ago. de 2024
  • 3 min. de leitura

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

    O que são modais

    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 a selecionar. 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 esteja executando na página principal.

    Anatomia modal

    Os modais em Construtor de IU podem 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 permite que o usuário saiba 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, ele precisa confirmar a exclusão de dados. Você pode escolher as opções de confirmação 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 diretivo, geralmente relacionado à exclusão ou apagamento de conteúdo. Ele permite que o usuário saiba a seriedade de uma ação e pergunta se ele deseja prosseguir com a ação.
    Personalizado Os modais personalizados abordam cenários que não são tratados 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 do modal. Você pode usar o estilo CSS (Folhas de estilos em cascata) para mudar a aparência visual do modal.
    iframe Use o iFrame para trazer conteúdo para o seu modal a partir do conteúdo do iFrame existente de uma URL e dados.
    Janela de visualização modal Passe conteúdo dinamicamente para o modal da janela de visualização por meio de uma vinculação de evento usando um client script.

    Manipuladores de eventos e modais

    Exponha eventos a modais para lidar com eventos de call-to-action. Por exemplo, uma ação primária, uma 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 próprio modal. Você seleciona o evento que deseja associar ao componente ou modal e o adiciona. Consulte Adicionar modal ao componente para obter instruções detalhadas.