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

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

Ignite UI for Web Components Dialog の例

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

import {defineComponents, IgcDialogComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDialogComponent, IgcButtonComponent);
export class DialogOverview {
    constructor() {
    }
}

new DialogOverview();
ts

<html>

<head>
  <title>Dialog Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <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.hide()" variant="flat">Cancel</igc-button>
        <igc-button slot="footer" onclick="dialog.hide()" variant="flat">OK</igc-button>
      </igc-dialog>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

使用方法

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

npm install igniteui-webcomponents
cmd

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

defineComponents(IgcDialogComponent);
ts

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>
html

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

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

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

閉じる (Closing)

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

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

import {defineComponents, IgcDialogComponent, IgcSwitchComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDialogComponent, IgcButtonComponent, IgcSwitchComponent);
export class DialogClosingVariations {
    constructor() {
        const dialog = document.getElementById('dialog') as IgcDialogComponent;
        const keepOpenOnEscSwitch = document.getElementById('keepOpenOnEscSwitch') as IgcSwitchComponent;
        const closeOnOutsideClickSwitch = document.getElementById('closeOnOutsideClickSwitch') as IgcSwitchComponent;

        closeOnOutsideClickSwitch!.addEventListener("igcChange", (ev: CustomEvent) => {
            dialog.closeOnOutsideClick = ev.detail.checked;
        });

        keepOpenOnEscSwitch!.addEventListener("igcChange", (ev: CustomEvent) => {
            dialog.keepOpenOnEscape = ev.detail.checked;
        });
    }
}

new DialogClosingVariations();
ts

<html>

<head>
  <title>Dialog Closing Variations</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-switch id="keepOpenOnEscSwitch" label-position="before">keepOpenOnEscape</igc-switch>
      <igc-switch id="closeOnOutsideClickSwitch" label-position="before">closeOnOutsideClick</igc-switch>

      <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.hide()" variant="flat">Cancel</igc-button>
        <igc-button slot="footer" onclick="dialog.hide()" variant="flat">OK</igc-button>
      </igc-dialog>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

(フォーム)

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

import { defineComponents, IgcDialogComponent, IgcButtonComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDialogComponent, IgcButtonComponent, IgcInputComponent);

const userIcon =
'<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>';

const 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>';

export class DialogForm {
    constructor() {
        registerIconFromText("username", userIcon);
        registerIconFromText("password", passwordIcon);
    }
}

new DialogForm();
ts

<html>

<head>
  <title>Dialog Form</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

      <igc-dialog id="dialog" title="Login">
        <form id="form" method="dialog">
          <igc-input label="Username">
            <igc-icon name="username" slot="prefix"></igc-icon>
          </igc-input>
          <br>
          <igc-input type="password" label="Password">
            <igc-icon name="password" slot="prefix"></igc-icon>
          </igc-input>
          <br>
          <div style="display: flex; justify-content: flex-end;">
            <igc-button type="reset" variant="flat">Reset</igc-button>
            <igc-button type="submit" variant="flat">Submit</igc-button>
          </div>
        </form>

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

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

スタイル設定

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

import {defineComponents, IgcDialogComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DialogStyling.css';

defineComponents(IgcDialogComponent, IgcButtonComponent);
export class DialogStyling {
    constructor() {
    }
}

new DialogStyling();
ts

<html>

<head>
  <title>Dialog Styling</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

      <igc-dialog id="dialog" title="Confirmation">
        <h1 slot="title">Styled Title</h1>
        <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.toggle()" variant="flat">Cancel</igc-button>
        <igc-button slot="footer" onclick="dialog.toggle()" variant="flat">OK</igc-button>
      </igc-dialog>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

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

igc-dialog::part(title),
igc-dialog::part(footer) {
    background: #011627;
    color:#ECAA53;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css