Blazor Dialog 개요

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

Ignite UI for Blazor Dialog Example

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbDialogModule)
   );

            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<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();
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Usage

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

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

// in Program.cs file

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

대화 상자 구성 요소를 표시하는 가장 간단한 방법은 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();
    }
}
razor

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

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

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

Closing

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

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

Form

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbDialogModule),
                typeof(IgbIconModule),
                typeof(IgbInputModule)

   );

            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton @onclick="OnDialogShow" Variant=@ButtonVariant.Contained>Show Dialog</IgbButton>
    <IgbDialog @ref="DialogRef" Title="Login">
        <form id="form" method="dialog">
            <IgbInput Label="Username">
                <span slot="prefix">
                    <IgbIcon @ref="@UsernameIconRef" IconName="username" Collection="material"></IgbIcon>
                </span>
            </IgbInput>
            <br>
            <IgbInput type="password" Label="Password">
                <span slot="prefix">
                    <IgbIcon @ref="@PasswordIconRef" IconName="password" Collection="material"></IgbIcon>
                </span>
            </IgbInput>
            <br>
            <div style="display: flex; justify-content: flex-end;">
                <IgbButton DisplayType="ButtonBaseType.Reset" Variant=@ButtonVariant.Flat>Reset</IgbButton>
                <IgbButton DisplayType="ButtonBaseType.Submit" Variant=@ButtonVariant.Flat>Submit</IgbButton>
            </div>
        </form >

        <div slot="footer">
            <igc-button>Create an account</igc-button>
        </div>
    </IgbDialog>
</div>

@code {
    
    private IgbIcon UsernameIconRef { get; set; }
    private IgbIcon PasswordIconRef { get; set; }

    public IgbDialog DialogRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.UsernameIconRef != null)
        {
            await this.UsernameIconRef.EnsureReady();
            string usernameIcon = "<svg width='24px' height='24px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M15.71,12.71a6,6,0,1,0-7.42,0,10,10,0,0,0-6.22,8.18,1,1,0,0,0,2,.22,8,8,0,0,1,15.9,0,1,1,0,0,0,1,.89h.11a1,1,0,0,0,.88-1.1A10,10,0,0,0,15.71,12.71ZM12,12a4,4,0,1,1,4-4A4,4,0,0,1,12,12Z'/></svg>";
            await this.UsernameIconRef.RegisterIconFromTextAsync("username", usernameIcon, "material");
        }

        if (firstRender && this.PasswordIconRef != null)
        {
            await this.PasswordIconRef.EnsureReady();
            string passwordIcon = "<svg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.0151 13.6556C14.8093 14.3587 16.9279 13.9853 18.3777 12.5355C20.3304 10.5829 20.3304 7.41709 18.3777 5.46447C16.4251 3.51184 13.2593 3.51184 11.3067 5.46447C9.85687 6.91426 9.48353 9.03288 10.1866 10.8271M12.9964 13.6742L6.82843 19.8422L4.2357 19.6065L4 17.0138L10.168 10.8458M15.5493 8.31568V8.29289' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /></svg>";
            await this.PasswordIconRef.RegisterIconFromTextAsync("password", passwordIcon, "material");
        }
    }

    public async Task OnDialogShow()
    {
        if (this.DialogRef != null)
        {
            await this.DialogRef.ShowAsync();
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Styling

구성 요소는 IgbDialog 스타일을 완전히 제어할 수 있도록 여러 CSS 부분을 노출합니다.

이름	설명
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);
}
css

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbDialogModule)
   );

            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

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

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

<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();
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

API References

• KeepOpenOnEscape
• CloseOnOutsideClick
• Hide
• HideDefaultAction
• Open
• Title
• IgbDialog
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브