Web Components Dialog (ダイアログ) の概要

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

Ignite UI for Web Components Dialog の例

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

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents';

defineComponents(IgcDialogComponent);

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

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

<igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

<igc-dialog id="dialog" title="Confirmation">
    <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">Cancel</igc-button>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">OK</igc-button>
</igc-dialog>

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

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

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

閉じる (Closing)

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

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

(フォーム)

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

スタイル設定

Dialog コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

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

API リファレンス

その他のリソース

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