Visão geral do diálogo Blazor

    O componente Ignite UI for Blazor Dialog é usado para exibir algumas informações ou solicitar ao usuário uma ação ou confirmação. Ele é mostrado em uma janela modal, o que significa que o usuário não tem permissão para interagir com o aplicativo principal até que uma determinada ação seja executada, fechando o diálogo.

    Ignite UI for Blazor Dialog Example

    Este exemplo demonstra como criar um componente Dialog no Blazor.

    Usage

    Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.

    Antes de usar o Blazor IgbDialog, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDialogModule));

    A maneira mais simples de exibir o componente de diálogo é usar seu método Show e chamá-lo com um clique de botão.

    <div class="container vertical">
    <IgbButton @onclick="OnDialogShow" Variant=@ButtonVariant.Contained>Show Dialog</IgbButton>
    <IgbDialog @ref="DialogRef" Title="Confirmation">
        <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
        <IgbButton slot="footer" @onclick="OnDialogHide" Variant=@ButtonVariant.Flat>Cancel</IgbButton>
        <IgbButton slot="footer" @onclick="OnDialogHide" Variant=@ButtonVariant.Flat>OK</IgbButton>
    </IgbDialog>
</div>

@code {
    public IgbDialog DialogRef;
    public async Task OnDialogShow()
    {
        if (this.DialogRef != null)
            await this.DialogRef.ShowAsync();
    }
    public async Task OnDialogHide()
    {
        if (this.DialogRef != null)
            await this.DialogRef.HideAsync();
    }
}

    O componente Dialog fornece uma propriedade Open, que lhe dá a capacidade de configurar seu estado de acordo com o cenário da sua aplicação.

    Use a propriedade Title para definir o título do diálogo. No entanto, se qualquer conteúdo for fornecido no slot title, ele terá precedência sobre a propriedade.

    Botões de ação ou informações adicionais podem ser colocados na parte inferior do diálogo por meio do slot footer. Se nenhum conteúdo for adicionado lá, um botão OK padrão será exibido, fechando o diálogo quando clicado. Caso você não queira que esse botão seja exibido, você pode definir a propriedade HideDefaultAction como true. O valor padrão é false.

    Closing

    Por padrão, o Dialog é fechado automaticamente quando o usuário pressiona ESC. Você pode evitar esse comportamento usando a propriedade KeepOpenOnEscape. O valor padrão é false. Se houver um menu suspenso aberto (ou qualquer outro elemento que deva manipular ESC internamente) no diálogo, pressionar ESC uma vez fechará o menu suspenso e pressioná-lo novamente fechará o diálogo.

    Use a propriedade CloseOnOutsideClick para configurar se o diálogo deve ser fechado ao clicar fora dele. O valor padrão é false.

    Form

    Elementos de formulário podem fechar um Dialog se tiverem o atributo method="dialog". Enviar o formulário acionará o fechamento do diálogo.

    Styling

    The IgbDialog component exposes several CSS parts to give you full control over its style:

    Name Description
    base The base wrapper of the dialog.
    title The title container.
    footer The footer container.
    content The content container. 
    igc-dialog::part(content) {
  background: var(--ig-secondary-800);
  color: var(--ig-secondary-800-contrast);
}

igc-dialog::part(title),
igc-dialog::part(footer) {
  background: var(--ig-secondary-800);
  color: var(--ig-warn-500);
}

    API References

    Additional Resources