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

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

Ignite UI for Blazor Dialog の例

このサンプルでは、Blazor で Dialog コンポーネントを作成する方法を示します。

使用方法

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

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

// in Program.cs file

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

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

Dialog コンポーネントは Open プロパティを提供します。これにより、アプリケーションシナリオに従ってその状態を構成できます。

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

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

閉じる (Closing)

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

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

(フォーム)

属性 method="dialog" がある場合、フォーム要素はダイアログを閉じることができます。フォームを送信すると、ダイアログが閉じられます。

スタイル設定

Dialog コンポーネントは、いくつかの 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;
}