Blazor Dialog (ダイアログ) の概要

Ignite UI for Blazor Dialog コンポーネントは、情報を表示したり、ユーザーにアクションや確認を促すために使用されます。これはモーダル ウィンドウに表示されます。つまり、ダイアログを閉じる特定のアクションが実行されるまで、ユーザーはメイン アプリを操作できません。

Ignite UI for Blazor Dialog の例

このサンプルでは、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コピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。

Blazor IgbDialog を使用する前に、次のように登録する必要があります:

// in Program.cs file

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

Dialog コンポーネントを表示する最も簡単な方法は、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 プロパティを提供します。これにより、アプリケーション シナリオに従ってその状態を構成できます。

Dialog のタイトルを設定するには、Title プロパティを使用します。ただし、title スロットにコンテンツが指定されている場合は、プロパティよりも優先されます。

アクション ボタンまたは追加情報は、footer スロットを介してダイアログの下部に配置できます。そこにコンテンツが追加されていない場合、デフォルトの [OK] ボタンが表示され、クリックするとダイアログが閉じます。このボタンを表示したくない場合は、HideDefaultAction プロパティを true に設定できます。デフォルト値は false です。

閉じる (Closing)

デフォルトでは、ユーザーが ESC キーを押すと、ダイアログは自動的に閉じられます。KeepOpenOnEscape プロパティを使用して、この動作を防ぐことができます。デフォルト値は false です。ダイアログに開いているドロップダウン (または ESC を内部で処理する必要があるその他の要素) がある場合、ESC を 1 回押すとドロップダウンが閉じ、もう一度押すとダイアログが閉じます。

CloseOnOutsideClick プロパティを使用して、ダイアログの外側をクリックしたときにダイアログを閉じるかどうかを構成します。デフォルト値は false です。

(フォーム)

属性 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 エクスペリエンスを構築します。

無料で試してみる

スタイル設定

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 リファレンス

• KeepOpenOnEscape
• CloseOnOutsideClick
• Hide
• HideDefaultAction
• Open
• Title
• IgbDialog
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)