Ele IDialogService fornece métodos para exibir diálogos modais ao usuário, incluindo prompts de confirmação, mensagens de erro, avisos informativos, notificações de sucesso e avisos, além de diálogos com conteúdo próprio.
Acesse o serviço de diálogo a partir de qualquer componente. No React, chamada useDialogService() de dentro da árvore encapsulada pelo provedor de diálogo do framework; no Blazor, injetar o serviço via injeção de propriedades. Note que o serviço de diálogo PowerPortalsPro é distinto do serviço de diálogo subjacente FluentUI.
// useDialogService() retorna a API de diálogo do framework. Disponível em qualquer
// Componente de função abaixo <FluentDialogProvider> do montado no app
// Root. O objeto retornado expõe métodos de show* assíncronos para confirmação,
// Informações / Sucesso / Aviso / Barras de Erro e Renderização de Diálogo Personalizada.
import { useDialogService } from '@powerportalspro/react-fluent';
function MyComponent() {
const dialogs = useDialogService();
// ...
}using IDialogService = PowerPortalsPro.Web.Blazor.Services.IDialogService;
[Inject]
private IDialogService _dialogService { get; set; } = null!;Use ShowConfirmationAsync para pedir ao usuário uma pergunta de sim/não. A propriedade retornada DialogResult.Cancelled é true quando o usuário seleciona a opção secundária (negativa).
const result = await dialogs.showConfirmationAsync(
'Tem certeza de que quer apagar esse registro?',
{
title: 'Confirmar Excluir',
primaryText: 'Sim',
secondaryText: 'Não',
},
);
if (!result.cancelled) {
// Usuário confirmado — prossiga com a exclusão
}var result = await _dialogService.ShowConfirmationAsync(
"Tem certeza de que quer apagar esse registro?",
title: "Confirmar Excluir",
primaryText: "Sim",
secondaryText: "Não");
if (!result.Cancelled)
{
// Usuário confirmado — prossiga com a exclusão
}Use os seguintes métodos para mostrar diálogos de mensagens de um único botão com diferentes estilos visuais:
ShowInfoAsync — Mensagem informativa com ícone neutro.ShowSuccessAsync — Mensagem de sucesso com um ícone verde.ShowWarningAsync — Mensagem de aviso com um ícone amarelo.ShowErrorAsync — Mensagem de erro com um ícone vermelho de erro.await dialogs.showInfoAsync('A operação foi concluída.', 'Informações');
await dialogs.showSuccessAsync('Registro salvo com sucesso.', 'Sucesso');
await dialogs.showWarningAsync('Essa ação não pode ser desfeita.', 'Aviso');
await dialogs.showErrorAsync('Um erro ocorreu durante o salvamento.', 'Erro');await _dialogService.ShowInfoAsync("A operação foi concluída.", "Informações");
await _dialogService.ShowSuccessAsync("Registro salvo com sucesso.", "Sucesso");
await _dialogService.ShowWarningAsync("Essa ação não pode ser desfeita.", "Aviso");
await _dialogService.ShowErrorAsync("Um erro ocorreu durante o salvamento.", "Erro");ShowDialogAsync mostra conteúdo seu, como um formulário, um seletor ou uma prévia, e retorna o que o diálogo encerra. No Blazor, passe um componente (ou um RenderFragment); no React, passe uma função que renderize o conteúdo. Defina PrimaryText e SecondaryText para os botões que o serviço desenha, ou deixe ambos de fora para conteúdo que desenha seu próprio.
O conteúdo recebe o diálogo em que é mostrado: um IDialogContext em Blazor, recebido como um parâmetro em cascata, e um DialogHandle em React, passado para a função de renderização e disponível em qualquer lugar dentro de . useDialogHandle()Use para fechar com um valor, cancelar, ativar ou desativar o botão primário, ou definir o que o botão primário faz. O que essa ação retorna é o que o diálogo retorna. Retorne KeepOpen (KEEP_OPEN no React) para manter o diálogo aberto, por exemplo, enquanto a entrada ainda não for válida.
// O conteúdo é renderizado onde os diálogos estão hospedados, não onde foi aberto. Ele pode usar os serviços do app, mas não o contexto da página, então passe o que precisa.
const result = await dialogs.showDialogAsync<string>(
(dialog) => <RenameForm initialName={name} dialog={dialog} />,
{
title: 'Renomeação',
primaryText: 'Salvar',
secondaryText: 'Cancelar',
},
);
if (!result.cancelled && result.data !== undefined) {
// O diálogo foi salvo: use o nome que ele retornou
}
// RenameForm
function RenameForm({ initialName, dialog }: { initialName: string; dialog: DialogHandle<string> }) {
const [name, setName] = useState(initialName);
dialog.onPrimary(async () =>
name.trim() ? name.trim() : KEEP_OPEN); // Ainda não é válido: diga o motivo e mantenha o diálogo aberto
return <Input value={name} onChange={(_, d) => setName(d.value)} />;
}// O conteúdo é renderizado onde os diálogos estão hospedados, não onde foi aberto. Ele pode usar os serviços do app, mas não o contexto da página, então passe o que precisa.
var result = await _dialogService.ShowDialogAsync<RenameDialog>(
options =>
{
options.Title = "Renomeação";
options.PrimaryText = "Salvar";
options.SecondaryText = "Cancelar";
},
new Dictionary<string, object?> { [nameof(RenameDialog.InitialName)] = name });
if (result.GetData<string>() is { } newName)
{
// O diálogo foi salvo: use o nome que ele retornou
}
// RenameDialog.razor: <FluentTextInput @bind-Value="_name" />
[CascadingParameter] public IDialogContext Dialog { get; set; } = default!;
[Parameter] public string? InitialName { get; set; }
private string? _name;
protected override void OnInitialized()
{
_name = InitialName;
Dialog.OnPrimary = () => Task.FromResult<object?>(string.IsNullOrWhiteSpace(_name)
? IDialogContext.KeepOpen // Ainda não é válido: diga o motivo e mantenha o diálogo aberto
: _name.Trim());
}Abre um diálogo com um formulário. Salvar mantém o diálogo aberto até que um nome seja inserido, então retorna para a página; Cancelar não retorna nada.
Todos os métodos de diálogo aceitam opcionais title e primaryText parâmetros. Se omitidos, valores padrão localizados são usados. O diálogo de confirmação também aceita um secondaryText parâmetro para o rótulo do botão de cancelar.
Todos os métodos retornam um DialogResult objeto. Para diálogos de confirmação, verifique a Cancelled propriedade para determinar a escolha do usuário. Para diálogos de mensagens, o resultado indica que o diálogo foi descartado.
Use os controles abaixo para personalizar o título e a mensagem do diálogo, depois clique em qualquer botão para ver o tipo de diálogo correspondente.
Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
OpenDialogCount | int | Quantos diálogos este serviço tem abertos atualmente. |
OpenDialogCountNome | Parâmetros | Tipo | Descrição |
|---|---|---|---|
ShowConfirmationAsync | string message string title string primaryText string secondaryText | Task<DialogResult> | Mostra um diálogo de confirmação com os botões fornecidos message e dois de ação, depois espera por o usuário deve escolher um. O retorno Services.DialogResult foi DialogResult.Cancelled definido para |
ShowDialogAsync<TComponent> | Action<CustomDialogOptions> configure IDictionary<string, Object> parameters | Task<DialogResult> | Aparece |
ShowErrorAsync | string message string title string primaryText | Task<DialogResult> | Mostra uma caixa de diálogo de erro com o fornecido message e espera o usuário descartá-lo. |
ShowInfoAsync | string message string title string primaryText | Task<DialogResult> | Mostra um diálogo informativo com o fornecido message e espera que o usuário o descarte. |
ShowSuccessAsync | string message string title string primaryText | Task<DialogResult> | Mostra um diálogo de sucesso com o fornecido message e espera o usuário descartá-lo. |
ShowWarningAsync | string message string title string primaryText | Task<DialogResult> | Mostra uma caixa de aviso com o fornecido message e espera o usuário descartá-lo. |
ShowConfirmationAsyncmessage e dois de ação, depois espera por o usuário deve escolher um. O retorno Services.DialogResult foi DialogResult.Cancelled definido para ShowDialogAsync<TComponent>ShowErrorAsyncmessage e espera o usuário descartá-lo.ShowInfoAsyncmessage e espera que o usuário o descarte.ShowSuccessAsyncmessage e espera o usuário descartá-lo.ShowWarningAsyncmessage e espera o usuário descartá-lo.Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
Cancelled | bool | False | Recebe um valor indicando se o diálogo foi cancelado (por exemplo, o usuário o descartou sem confirmar). |
Data | Object? | Carga útil opcional de dados retornada pelo diálogo quando ele era fechado. |
CancelledDataNome | Parâmetros | Tipo | Descrição |
|---|---|---|---|
Cancel | Object data | DialogResult | Cria um Services.DialogResult que representa um resultado cancelado, opcionalmente carregando uma carga útil de dados. |
GetData<T> | T? | O valor com o diálogo fechado, como | |
Ok<T> | T result | DialogResult | Cria um Services.DialogResult que representa um resultado confirmado, carregando result como carga útil de dados. |
TryGetData<T> | out T value | bool | Lê o valor com o encerramento do diálogo, como |
CancelServices.DialogResult que representa um resultado cancelado, opcionalmente carregando uma carga útil de dados.GetData<T>Ok<T>Services.DialogResult que representa um resultado confirmado, carregando result como carga útil de dados.TryGetData<T>Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
PreventDismissOnEscape | bool | False | Se o Escape é impedido de fechar o diálogo. Padrão false. |
PrimaryText | string? | O rótulo do botão primário. O serviço desenha o botão quando isso está definido; deixe ambos e CustomDialogOptions.SecondaryText não configurado para conteúdo que desenha seus próprios botões. O que é o botão faz é até IDialogContext.OnPrimary. | |
SecondaryText | string? | O rótulo do botão secundário. O serviço desenha o botão quando isso é ativado, e cancela O diálogo. | |
ShowDismiss | bool | True | Se o cabeçalho mostra um botão de fechar. Padrão true. |
Title | string? | O título do diálogo, mostrado no cabeçalho. Omita para um diálogo sem ele. | |
Width | string? | A largura do diálogo como um comprimento CSS, por exemplo, |
PreventDismissOnEscapefalse.PrimaryTextCustomDialogOptions.SecondaryText não configurado para conteúdo que desenha seus próprios botões. O que é o botão faz é até IDialogContext.OnPrimary.SecondaryTextShowDismisstrue.TitleWidthNome | Tipo | Padrão | Descrição |
|---|---|---|---|
OnPrimary | Func<Task<Object>>? | Executa quando o botão primário desenhado pelo serviço é pressionado. Seu resultado é o que o diálogo retorna, em DialogResult.Data; retorne IDialogContext.KeepOpen para manter o diálogo aberto em vez disso. Desconfigurado, o botão fecha o diálogo sem dados. Enquanto roda, os botões são desativado e o modo Escape não cancela o diálogo (no Blazor Server, a partir de um momento após o clica: o bloco chega ao navegador uma viagem de ida e volta depois). Se ele lançar, o erro é registrado, o diálogo permanece aberto e uma mensagem de erro geral é exibida sobre ele; para falhas que o usuário pode corrigir, diga você mesmo o que deu errado e devolve.IDialogContext.KeepOpen | |
PrimaryEnabled | bool | Se o botão primário puxado pelo serviço pode ser pressionado, por exemplo, apenas uma vez que uma escolha obrigatória é Feito. Padrão true. |
OnPrimaryDialogResult.Data; retorne IDialogContext.KeepOpen para manter o diálogo aberto em vez disso. Desconfigurado, o botão fecha o diálogo sem dados. Enquanto roda, os botões são desativado e o modo Escape não cancela o diálogo (no Blazor Server, a partir de um momento após o clica: o bloco chega ao navegador uma viagem de ida e volta depois). Se ele lançar, o erro é registrado, o diálogo permanece aberto e uma mensagem de erro geral é exibida sobre ele; para falhas que o usuário pode corrigir, diga você mesmo o que deu errado e devolve.IDialogContext.KeepOpenPrimaryEnabledtrue.Nome | Parâmetros | Tipo | Descrição |
|---|---|---|---|
CancelAsync | Task | Fecha o diálogo como cancelado, o que retorna Cancel(System.Object). | |
CloseAsync | Object data | Task | Fecha o diálogo, que retorna DialogResult.Ok`<T>(`<U>) com data. |
CancelAsyncCancel(System.Object).CloseAsyncDialogResult.Ok`<T>(`<U>) com data.