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

Ignite UI for Angular Dialog Window コンポーネントをメッセージを表示するか、入力フォームを表示するために使用します。コンポーネントはアプリケーションコンテンツの中央上にダイアログウィンドウを開きます。キャンセル可能な規格の警告メッセージを提供できます。

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';
// 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, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
// 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 {}

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 { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
// 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 }
    };
}

Note

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

params オブジェクトの例:

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

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

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

スタイル設定

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

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

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

dialog-theme を拡張する新しいテーマを作成し、ダイアログのスタイルを設定できるさまざまなパラメーターを受け取ります。

$my-dialog-theme: dialog-theme(
    $background: #011627,
    $title-color: #ECAA53,
    $message-color: #FEFEFE,
    $border-radius: .3,
);

Note

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

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

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

Note

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

テーマを含む

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

$legacy-support が true に設定されている場合、テーマを以下のように含めます。

 @include dialog($my-dialog-theme);

Note

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

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

$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

@include css-vars($my-dialog-theme);

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバルセレクターが必要なため、:host を使用する必要があります。

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

デモ

API まとめ

テーマの依存関係

その他のリソース

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

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

Angular Dialog の例

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

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

通知ダイアログ

標準ダイアログ

カスタム ダイアログ

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

Note

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

スタイル設定

Note

Note

テーマを含む

Note

Note

デモ

API まとめ

テーマの依存関係

その他のリソース

テーマ設定

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

カスタムダイアログ