Open Source

Angular Dialog Window (ダイアログウィンドウ) コンポーネントの概要

Use the Ignite UI for Angular Dialog Window component to display messages or present forms for users to fill out. The component opens a dialog window centered on top of app content. You can also provide a standard alert message that users can cancel.

Angular Dialog の例

Ignite UI for Angular Dialog Window を使用した作業の開始

Ignite UI for Angular Dialog Window コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxDialogModule をインポートします。

// app.module.ts

...
import { IgxDialogModule } from 'igniteui-angular/dialog';
// import { IgxDialogModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDialogModule],
    ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxDialogComponent をスタンドアロンの依存関係としてインポートすることも、IGX_DIALOG_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポートコンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_DIALOG_DIRECTIVES } from 'igniteui-angular/dialog';
import { IgxButtonDirective } from 'igniteui-angular/directives';
import { IgxRippleDirective } from 'igniteui-angular/directives';
// import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>

    <igx-dialog #alert
        title="Notification"
        message="Your email has been sent successfully!"
        leftButtonLabel="OK"
        (leftButtonSelect)="alert.close()">
    </igx-dialog>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective]
    /* or imports: [IgxDialogComponent, IgxButtonDirective, IgxRippleDirective] */
})
export class HomeComponent {}

このコンポーネントはマテリアルアイコンを使用します。index.html に次のリンクを追加してください: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ignite UI for Angular Dialog Window モジュールまたはディレクティブをインポートしたので、igx-dialog コンポーネントの使用を開始できます。

Dialog Window コンポーネントの使用

通知ダイアログ

通知のダイアログを作成するには、メールコンポーネントのテンプレートに以下のコードを追加します。title、message、leftButtonLabel を設定し、leftButtonSelect イベントを処理します。

<!--email.component.html-->
<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>

<igx-dialog #alert
    title="Notification"
    message="Your email has been sent successfully!"
    leftButtonLabel="OK"
    (leftButtonSelect)="alert.close()">
</igx-dialog>

すべて適切に設定できると、ブラウザ上でデモサンプルを確認することができます。

標準ダイアログ

標準のダイアログを作成するには、ファイルマネージャーコンポーネントのテンプレートに以下のコードを追加します。title、message、leftButtonLabel、rightButtonLabel を設定し、leftButtonSelect および rightButtonSelect イベントを処理します。

<!--file-manager.component.html-->
<button igxButton="contained" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button>

<igx-dialog #dialog title="Confirmation"
    leftButtonLabel="Cancel"
    (leftButtonSelect)="dialog.close()"
    rightButtonLabel="OK"
    (rightButtonSelect)="onDialogOKSelected($event)"
    message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?">
</igx-dialog>

カスタムダイアログ

カスタムダイアログを作成するには、サインインコンポーネントのテンプレートに以下のコードを追加します。ダイアログのタイトル領域は igxDialogTitle ディレクティブまたは igx-dialog-title セレクターを使ってカスタマイズできます。アクション領域は igxDialogActions ディレクティブまたは igx-dialog-actions セレクターを使ってカスタマイズできます。 igxLabel および igxInput ディレクティブで装飾された label と input を含む 2 つの入力グループを追加します。

<!--sign-in.component.html-->
<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Custom Dialog</button>

<igx-dialog #form [closeOnOutsideSelect]="true">
    <igx-dialog-title>
        <div class="dialog-container">
            <igx-icon>vpn_key</igx-icon>
            <div class="dialog-title">Sign In</div>
        </div>
    </igx-dialog-title>

    <form class="signInForm">
        <igx-input-group>
            <igx-prefix>
                <igx-icon>person</igx-icon>
            </igx-prefix>
            <label igxLabel for="username">Username</label>
            <input igxInput id="username" type="text"/>
        </igx-input-group>
        <igx-input-group>
            <igx-prefix>
                <igx-icon>lock</igx-icon>
            </igx-prefix>
            <label igxLabel>Password</label>
            <input igxInput id="password" type="password"/>
        </igx-input-group>
    </form>

    <div igxDialogActions>
        <button igxButton (click)="form.close()">CANCEL</button>
        <button igxButton (click)="form.close()">SIGN IN</button>
    </div>
</igx-dialog>

位置とアニメーション設定

igx-dialog が表示される位置を変更するには、2 つの方法があります。

open メソッドを使用して、有効な OverlaySettings を渡します。例:

import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
// import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class HomeComponent {
    public positionSettingsOnOpen: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Right,
        verticalDirection: VerticalAlignment.Middle,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Middle,
    };
    public overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(this.positionSettingsOnOpen),
        scrollStrategy: new NoOpScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    public openDialog() {
        this.alert.open(this.overlaySettings);
    }
}

positionSettings @Input を使用します。例:

<igx-dialog #alert title="Notification" [positionSettings]="positionSettings" >
</igx-dialog>

import { useAnimation } from '@angular/animations';
import { slideInTop, slideOutBottom } from 'igniteui-angular/animations';
import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular/core';
// import { PositionSettings, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class HomeComponent {
    public positionSettings: PositionSettings = {
        openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
        horizontalDirection: HorizontalAlignment.Left,
        verticalDirection: VerticalAlignment.Middle,
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Middle,
        minSize: { height: 100, width: 100 }
    };
}

同じアプローチをアニメーション設定に使用する必要があります。openAnimation と closeAnimation プロパティを使用して、期間などのアニメーションパラメーターを定義します。

params: {
    delay: '0s',
    duration: '350ms',
    easing: EaseOut.quad,
    endOpacity: 1,
    fromPosition: 'translateX(-500px)',
    startOpacity: 0,
    toPosition: 'translateY(0)'
}

ダイアログ内にフォーカスをトラップ

デフォルトでは、ダイアログが開かれると、Tab キーのフォーカスがダイアログ内にトラップされます。つまり、ユーザーがフォーカス可能な要素をタブで移動し続けても、フォーカスは要素から離れません。フォーカスが最後の要素を離れると、最初の要素に移動します。その逆も同様です。Shift + Tab キーを押すと、フォーカスが最初の要素を離れると、最後の要素にフォーカスが移されます。ダイアログにフォーカス可能な要素が含まれていない場合、フォーカスはダイアログコンテナー自体にトラップされます。この動作は、focusTrap プロパティを設定することで変更できます。

スタイル設定

Dialog テーマのプロパティマップ

$background プロパティを変更すると、次の依存プロパティが自動的に更新されます。

Primary Property	Dependent Property	Description
$background	$title-color	The dialog title text color.
	$message-color	The dialog message text color.
	$border-color	The border color used for dialog component.

ダイアログウィンドウのスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをはじめにインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最もシンプルな方法として、dialog-theme を拡張し、ダイアログをスタイリングするためのパラメーターを指定して新しいテーマを作成します。$background を設定するだけで、前景用のプロパティに対して適切なコントラストの色が自動的に選ばれます。必要に応じて手動で指定することも可能です。

$my-dialog-theme: dialog-theme(
  $background: #011627,
  $title-color: #ecaa53,
  $border-radius: 5px,
);

ダイアログウィンドウのコンテンツの一部として使用される追加コンポーネント (IgxButton など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。

$custom-button: contained-button-theme(
  $background: #ecaa53,
  $foreground: #011627,
);

ダイアログウィンドウは IgxOverlayService を使用するため、カスタムテーマがスタイルを設定するダイアログウィンドウに届くように、ダイアログウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。

<div igxOverlayOutlet>
  <igx-dialog #dialog1>
      <!-- .... -->
  </igx-dialog>
</div>

IgxOverlayService を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、オーバーレイスタイリングのトピックをご覧ください。

テーマを含む

最後にコンポーネントのテーマを含めます。

:host {
    @include tokens($my-dialog-theme);
}

コンポーネントが Emulated ViewEncapsulation を使用している場合、スタイルを適用するには ::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
  ::ng-deep {
    @include tokens($my-dialog-theme);
  }
}

デモ

API リファレンス

テーマの依存関係

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Angular Dialog Window (ダイアログ ウィンドウ) コンポーネントの概要