ダイアログ ウィンドウ
Ignite UI for Angular Dialog Window コンポーネントをメッセージを表示するか、入力フォームを表示するために使用します。コンポーネントはアプリケーション コンテンツの中央上にダイアログ ウィンドウを開きます。キャンセル可能な規格の警告メッセージを提供できます。
Angular Dialog の例
このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
はじめに、app.module.ts ファイルに IgxDialogModule をインポートします。
// app.module.ts
...
import { IgxDialogModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxDialogModule],
...
})
export class AppModule {}
通知ダイアログ
通知のダイアログを作成するには、メールコンポーネントのテンプレートに以下のコードを追加します。title、message、leftButtonLabel を設定し、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>
すべて適切に設定できると、ブラウザ上でデモサンプルを確認することができます。
標準ダイアログ
標準のダイアログを作成するには、ファイル マネージャー コンポーネントのテンプレートに以下のコードを追加します。title、message、leftButtonLabel、rightButtonLabel を設定し、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 つの方法があります。
openメソッドを使用して、有効なoverlaySettingsを渡します。例:
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
同じアプローチをアニメーション設定に使用する必要があります。openAnimation と closeAnimation プロパティを使用して、期間などのアニメーション パラメーターを定義します。
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-support が true に設定されている場合、テーマを以下のように含めます。
@include igx-dialog($my-dialog-theme);
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include igx-dialog($my-dialog-theme);
}
}
$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。
@include igx-css-vars($my-dialog-theme);
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。
:host {
@include igx-css-vars($my-dialog-theme);
}
