Controlo Dialog (experimental)

[Este artigo inclui documentação pré-versão e está sujeito a alterações.]

Um controlo utilizado para agrupar conteúdo.

Controlo de diálogo.

Important

  • Esta é uma funcionalidade experimental.
  • As funcionalidades de pré-visualização não se destinam a ser utilizadas em ambiente de produção e podem ter funcionalidades restritas. Esses recursos estão disponíveis antes de um lançamento oficial para que os clientes possam obter acesso antecipado e fornecer feedback.

Description

Uma caixa de diálogo (Diálogo) é uma janela de pop-up temporária que retira o foco da página ou aplicação e requer que as pessoas interajam com ele. É utilizado principalmente para confirmar ações, como a eliminação de um ficheiro ou para pedir que as pessoas façam uma escolha.

Este componente de tela imita o estilo e o comportamento do controlo Dialog da Fluent UI. Consulte a documentação para obter as melhores práticas.

Ver o componente no repositório do GitHub do Kit para Criadores.

Propriedades

Propriedades chave

Propriedade Description
Buttons Um conjunto de dados que define os botões (obtenha mais informações em Propriedades do botão).
Title Texto apresentado na secção de título.
OverlayColor Cor apresentada na área de sobreposição.
DialogWidth A largura do diálogo (não deve ser confundida com a largura do controlo, que deve abranger a largura da aplicação).
DialogHeight A altura do diálogo (não deve ser confundida com a altura do controlo, que deve abranger a altura da aplicação).
SubTitle Texto apresentado por baixo do título.

Propriedades do botão

Propriedade Description
Label A etiqueta apresentada no botão.
ButtonType Enumeração que determina o estilo do botão. Escolha entre Standard e Primary. 
Table(
    {
        Label: "Cancel", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Standard 
    },{
        Label: "Ok", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Primary
    }
)

Propriedades de estilo

Propriedade Description
Theme Objeto do tema. Mais informações sobre temas.

Obtenha informações sobre a formatação na secção Formatar conteúdo do painel do Painel.

Propriedades do evento

Propriedade Description
OnCloseSelect Expressão de ação executada quando o botão Encerrar é selecionado.
OnButtonSelect Expressão de ação executada quando um dos botões de ação é selecionado.

Comportamento

Configurar visibilidade do Diálogo

Torne visível o próprio controlo Dialog (ou a superfície na qual está localizado) quando uma variável booleana (true/false) muda para true. Atribua essa variável à propriedade de visibilidade do diálogo. Para ocultar o diálogo depois de ser apresentado, atualize a variável na propriedade de reposição acionada quando o ícone de encerramento é selecionado.

A seguir é apresentada a fórmula do Power Fx para abrir o diálogo numa fórmula de ação relacionada a outro componente em algum lugar na aplicação (por exemplo, a propriedade OnSelect de um botão):

UpdateContext({ showHideDialog: true })

O que se segue é a fórmula do Power Fx para fechar o diálogo, na propriedade OnCloseSelect do diálogo:

UpdateContext({ showHideDialog: false })

Atribua a variável à propriedade Visible do diálogo:

showHideDialog

Configurar ações do botão

Na propriedade OnButtonSelect do diálogo, forneça ações numa condição If() ou Switch() com base no valor de texto Self.SelectedButton.Label para definir a ação. Dependendo da ação, poderá fazer sentido também fechar o diálogo após a ação ser concluída.

    If( Self.SelectedButton.Label = "Send", 
        Notify("Email Sent")
    );
    UpdateContext({ showHideDialog: false })

Limitações

Este componente de tela só pode ser utilizado em aplicações de tela e páginas personalizadas.

  • Last updated on