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 ao Ignite UI for Blazor, leia o tópico Comecando.

    Antes de usar o BlazorIgbDialog, 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 seuShow método e chamá-lo com um clique no 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 Diálogo fornece umaOpen propriedade que permite configurar seu estado conforme o cenário da sua aplicação.

    Use aTitle propriedade para definir o título do diálogo. No entanto, se algum conteúdo for fornecido notitle slot, 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 através dofooter slot. Se nenhum conteúdo for adicionado ali, um botão padrãoOK será exibido que fecha o Diálogo ao clicar. Caso você não queira que esse botão apareça, pode definir aHideDefaultAction propriedade como verdadeira. O valor padrão é falso.

    Closing

    Por padrão, o Diálogo é fechado automaticamente quando o usuário pressionaESC. Você poderia prevenir esse comportamento usando aKeepOpenOnEscape propriedade. O valor padrão é falso. Se houver um menu suspenso aberto (ou qualquer outro elemento que deva ser controladoESC internamente) no diálogo, pressionarESC uma vez fecha o menu suspenso e pressioná-lo novamente fecha o diálogo.

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

    Form

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

    Styling

    OIgbDialog componente expõe várias partes CSS para te dar controle total sobre seu estilo:

    Nome Descrição
    base O wrapper base da caixa de diálogo.
    title O contêiner de título.
    footer O contêiner de rodapé.
    content O contêiner de conteúdo. 
    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