Blazor Dialog 개요

    Ignite UI for Blazor Dialog 구성 요소는 일부 정보를 표시하거나 사용자에게 작업이나 확인을 요청하는 데 사용됩니다. 모달 창에 표시되므로 사용자는 대화 상자를 닫는 특정 작업이 수행될 때까지 기본 앱과 상호 작용할 수 없습니다.

    Ignite UI for Blazor Dialog Example

    이 샘플은 Blazor에서 Dialog 구성 요소를 만드는 방법을 보여줍니다.

    Usage

    Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    Before using the Blazor IgbDialog, you need to register it as follows:

    // in Program.cs file

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

    The simplest way to display the dialog component is to use its Show method and call it on a button click.

    <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();
    }
}

    The Dialog component provides an Open property, which gives you the ability to configure its state as per your application scenario.

    Use the Title property to set the title of the dialog. However, if any content is provided in the title slot, it will take precedence over the property.

    Action buttons or additional information can be placed in the bottom part of the dialog via the footer slot. If no content is added there, a default OK button will be shown that closes the Dialog when clicked. In case you do not want this button to be shown you can set the HideDefaultAction property to true. The default value is false.

    Closing

    By default, the Dialog is closed automatically when the user presses ESC. You could prevent this behavior using the KeepOpenOnEscape property. The default value is false. If there is an open dropdown (or any other element that should handle ESC internally) in the dialog, pressing ESC once will close the dropdown and pressing it again will close the dialog.

    Use the CloseOnOutsideClick property to configure if the dialog should be closed when clicking outside of it. The default value is false.

    Form

    Form elements can close a Dialog if they have the attribute method="dialog". Submitting the form will trigger the closing of the dialog.

    Styling

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

    이름 설명
    base 대화 상자의 기본 래퍼입니다.
    title 제목 컨테이너입니다.
    footer 바닥글 컨테이너입니다.
    content 콘텐츠 컨테이너입니다. 
    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