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

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

Ignite UI for React Dialog の例

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

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、React IgrDialog とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrDialogModule, IgrDialog } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDialogModule.register();

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

Dialog コンポーネントを表示する最も簡単な方法は、show メソッドを使用して、ボタンクリックで呼び出すことです。

<IgrButton variant="contained" clicked={this.onDialogShow}>
    <span>Show Dialog</span>
</IgrButton>

<IgrDialog ref={this.onDialogRef}>
    <span>Dialog Message</span>
</IgrDialog>

public onDialogRef(dialog: IgrDialog) {
    if (!dialog) { return; }
    this.dialogRef = dialog;
}

public onDialogShow() {
    if (this.dialogRef) {
        this.dialogRef.show();
    }
}

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