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 コンポーネントの使用

    通知ダイアログ

    通知のダイアログを作成するには、メールコンポーネントのテンプレートに以下のコードを追加します。titlemessageleftButtonLabel を設定し、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>
    

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

    標準ダイアログ

    標準のダイアログを作成するには、ファイル マネージャー コンポーネントのテンプレートに以下のコードを追加します。titlemessageleftButtonLabelrightButtonLabel を設定し、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 つの方法があります。

    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

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

    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-supporttrue に設定されている場合、テーマを以下のように含めます。

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

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

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

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

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

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

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

    デモ

    API まとめ

    テーマの依存関係

    その他のリソース

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