ダイアログ ウィンドウ

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

    Angular Dialog の例

    使用方法

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

    // app.module.ts
    
    ...
    import { IgxDialogModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxDialogModule],
        ...
    })
    export class AppModule {}
    

    通知ダイアログ

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

    <!--email.component.html-->
    <button igxButton="raised" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>
    
    <igx-dialog #alert
        title="Notification"
        message="Your email has been sent successfully!"
        leftButtonLabel="OK"
        (onLeftButtonSelect)="alert.close()">
    </igx-dialog>
    

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

    標準ダイアログ

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

    <!--file-manager.component.html-->
    <button igxButton="raised" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button>
    
    <igx-dialog #dialog title="Confirmation"
        leftButtonLabel="Cancel"
        (onLeftButtonSelect)="dialog.close()"
        rightButtonLabel="OK"
        (onRightButtonSelect)="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="raised" 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>
    

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

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

    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);
    }
    ....
    this.dialog.open(overlaySettings)
    
    • positionSettings @input を使用します。例:
    <igx-dialog #alert title="Notification" [positionSettings]="positionSettings" >
    </igx-dialog>
    
    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)'
    }
    

    スタイル設定

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

    @import '~igniteui-angular/lib/core/styles/themes/index';
    

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

    $my-dialog-theme: igx-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 igx-dialog($my-dialog-theme);
    
    Note

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

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

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

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

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

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

    デモ

    API まとめ

    テーマの依存関係

    その他のリソース

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