ダイアログが閉じた後に発生されるイベント。
<igx-dialog (closed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
ダイアログが閉じる前に発生されるイベント。
<igx-dialog (closing)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
Tab キー フォーカスが開いたときにダイアログ内にトラップされるかどうかを設定する @Input プロパティ。
デフォルトは true です。
<igx-dialog focusTrap="false""></igx-dialog>
id 属性の値を設定する @Input プロパティ。提供されていない場合は、自動的に生成されます。
<igx-dialog [id]="'igx-dialog-56'" #alert title="Notification"
leftButtonLabel="OK" (leftButtonSelect)="alert.close()">
</igx-dialog>
左ボタンの background-color を設定する @Input プロパティ。プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog leftButtonBackgroundColor="black" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
左ボタンの色を設定する @Input プロパティ。プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog leftButtonColor="yellow" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
ダイアログの左ボタンの label を設定する @Input プロパティ。
<igx-dialog leftButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog>
左ボタンの rippleを設定する @Input プロパティ。ripple はコンポーネントのクリック/タップをフェードするウェーブのシリーズとしてアニメーションを再生します。
プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog leftButtonRipple="green" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
左ボタンがクリックしたときに発生されるイベント。
<igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
</igx-dialog>
左ボタンの type を設定する @Input プロパティ。有効な値は flat、raised および fab です。
flat タイプのボタンは長方形で影なし。
raisedタイプボタンは長方形で影あり。
fab タイプ ボタンは円形で影あり。
デフォルト値は flat です。
<igx-dialog leftButtonType="raised" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
ダイアログの message を制御する @Input プロパティ。
<igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
ダイアログが開いた後に発生されるイベント。
<igx-dialog (opened)="onDialogOpenedHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
ダイアログが開く前に発生されるイベント。
<igx-dialog (opening)="onDialogOpenHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
右ボタンの background-color を設定する @Input プロパティ。プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog rightButtonBackgroundColor="black" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
右ボタンの color を設定する @Input プロパティ。プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog rightButtonColor="yellow" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
ダイアログの右ボタンの label を設定する @Input プロパティ。
<igx-dialog rightButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog>
右ボタンの ripple を設定する @Input プロパティ。
<igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
右ボタンがクリックしたときに発生されるイベント。
<igx-dialog (rightButtonSelect)="onDialogOKSelected($event)"
#dialog title="Confirmation" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"
rightButtonRipple="#4CAF50" closeOnOutsideSelect="true">
</igx-dialog>
右ボタンの type を設定する @Input プロパティ。有効な値は flat、raised および fab です。
flat タイプのボタンは長方形で影なし。
raisedタイプボタンは長方形で影あり。
fab タイプ ボタンは円形で影あり。
デフォルト値は flat です。
<igx-dialog rightButtonType="fab" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
ダイアログの title を制御する @Input プロパティ。
<igx-dialog title="Notification" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
Esc キーが押されたときにダイアログを閉じるかどうかを制御します。デフォルトは true です。
<igx-dialog [closeOnEscape]="false" ></igx-dialog>
「ダイアログ以外のクリックで閉じる」機能を有効にする @Input プロパティ。デフォルトで無効です。
<igx-dialog closeOnOutsideSelect="true" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()"
rightButtonLabel="OK" rightButtonRipple="#4CAF50" (rightButtonSelect)="onDialogOKSelected($event)">
</igx-dialog>
ダイアログをモーダルとして表示するかどうかを制御します。デフォルトは true です。
<igx-dialog [isModal]="false" ></igx-dialog>
ダイアログの状態。
// 取得
let dialogIsOpen = this.dialog.isOpen;
<!--設定-->
<igx-dialog [isOpen]='false'></igx-dialog>
双方向データ バインディング。
<!--設定-->
<igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
ダイアログで使用される位置とアニメーション設定を取得します。
@ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
let currentPosition: PositionSettings = this.alert.positionSettings
Sダイアログで使用される位置とアニメーション設定を設定します。
import { slideInLeft, slideOutRight } from 'igniteui-angular';
...
@ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
public newPositionSettings: 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 }
};
this.alert.positionSettings = this.newPositionSettings;
ダイアログのロールの値を返します。有効な値は dialog、alertdialog、alert です。
@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
let dialogRole = this.dialog.role;
}
状態の値を返します。利用可能な状態値は "open" または "close" です。
@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
let dialogState = this.dialog.state;
}
タイトルの id の値を返します。
@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
let dialogTitle = this.dialog.titleId;
}
ダイアログを開くメソッド。
<button (click)="dialog.open() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
<igx-dialog #dialog></igx-dialog>
Ignite UI for Angular Dialog Window - ヘルプ
Ignite UI Dialog Window はダイアログ ウィンドウをユーザーに表示します。 簡易なメッセージを表示するか、サインイン フォームなどの複雑なビジュアルを表示できます。 カスタム アクションのために提供される右および左ボタンもあります。
例: