Blazor 대화 상자 개요

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

    Ignite UI for Blazor Dialog Example

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

    Usage

    Ignite UI for Blazor UI에 대한 전체 소개는 시작 항목을 참조하세요.

    Blazor IgbDialog 사용하기 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

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

    대화 상자 구성 요소를 표시하는 가장 간단한 방법은 Show 메서드를 사용하고 버튼 클릭 시 호출하는 것입니다.

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

    Dialog 구성 요소는 애플리케이션 시나리오에 따라 해당 상태를 구성할 수 있는 기능을 제공하는 Open 속성을 제공합니다.

    ​Title 속성을 사용하여 대화 상자의 제목을 설정합니다. 그러나 title 슬롯에 콘텐츠가 제공되면 해당 콘텐츠가 속성보다 우선적으로 적용됩니다.

    작업 버튼이나 추가 정보는 footer 슬롯을 통해 대화 상자 하단에 배치할 수 있습니다. 콘텐츠가 추가되지 않은 경우 클릭하면 대화 상자를 닫는 기본 OK 버튼이 표시됩니다. 이 버튼을 표시하지 않으려면 HideDefaultAction 속성을 true로 설정하면 됩니다. 기본값은 false 입니다.

    Closing

    기본적으로 사용자가 ESC 키를 누르면 대화 상자가 자동으로 닫힙니다. KeepOpenOnEscape 속성을 사용하면 이 동작을 방지할 수 있습니다. 기본값은 false 입니다. 대화 상자에 열린 드롭다운(또는 ESC 내부적으로 처리해야 하는 다른 요소)이 있는 경우 ESC 한 번 누르면 드롭다운이 닫히고 다시 누르면 대화 상자가 닫힙니다.

    ​CloseOnOutsideClick 속성을 사용하여 대화 상자 외부를 클릭할 때 대화 상자를 닫아야 하는지 구성합니다. 기본값은 false 입니다.

    Form

    양식 요소에 method="dialog" 속성이 있는 경우 대화 상자를 닫을 수 있습니다. 양식을 제출하면 대화 상자가 닫힙니다.

    Styling

    대화 상자 구성 요소는 여러 CSS 부분(base, title, content 및 footer)을 노출하여 스타일을 완벽하게 제어할 수 있습니다.

    igc-dialog::part(content) {
    background: #011627;
    color: white;
}

igc-dialog::part(title),
igc-dialog::part(footer) {
    background: #011627;
    color: #ECAA53;
}

    API References

    Additional Resources