id 属性の値を設定する @Input プロパティ。提供されていない場合、自動的に生成されます。
<igx-dialog [id]="'igx-dialog-56'" #alert title="Notification" leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"></igx-dialog>左ボタンの background-color を設定する @Input プロパティ。プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog leftButtonBackgroundColor="black" leftButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>左ボタンの色を設定する @Input プロパティ。プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog leftButtonColor="yellow" leftButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>ダイアログの左ボタンの label を設定する @Input プロパティ。
<igx-dialog leftButtonLabel="OKAY" #alert title="Notification" (onLeftButtonSelect)="alert.close()"></igx-dialog>左ボタンの ripple を設定する @Input プロパティ。ripple はコンポーネントのクリック/タップをフェードするウェーブのシリーズとしてアニメーションを再生します。
プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog leftButtonRipple="green" leftButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>左ボタンの type を設定する @Input プロパティ。type の有効な値は flat、raised、および fab です。
The flat type button is a rectangle and doesn't have a shadow.
The raised type button is also a rectangle but has a shadow.
The fab type button is a circle with a shadow.
デフォルト値は flat です。
<igx-dialog leftButtonType="raised" leftButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>ダイアログの message を制御する @Input プロパティ。
<igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"></igx-dialog>ダイアログが閉じたときに発生されるイベント。
<igx-dialog (onClose)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>左ボタンがクリックしたときに発生されるイベント。
<igx-dialog (onLeftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
</igx-dialog>ダイアログが開いたときに発生されるイベント。
<igx-dialog (onOpen)="onDialogOpenHandler($event)" (onLeftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>右ボタンがクリックしたときに発生されるイベント。
<igx-dialog (onRightButtonSelect)="onDialogOKSelected($event)"
#dialog title="Confirmation" (onLeftButtonSelect)="dialog.close()" rightButtonLabel="OK"
rightButtonRipple="#4CAF50" closeOnOutsideSelect="true">
</igx-dialog>右ボタンの background-color を設定する @Input プロパティ。プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog rightButtonBackgroundColor="black" rightButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>右ボタンの color を設定する @Input プロパティ。プロパティをすべての有効な CSS 色プロパティ値に設定できます。
<igx-dialog rightButtonColor="yellow" rightButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>ダイアログの右ボタンの label を設定する @Input プロパティ。
<igx-dialog rightButtonLabel="OKAY" #alert title="Notification" (onLeftButtonSelect)="alert.close()"></igx-dialog>右ボタンの ripple を設定する @Input プロパティ。
<igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>右ボタンの type を設定する @Input プロパティ。type の有効な値は flat、raised、および fab です。
The flat type button is a rectangle and doesn't have a shadow.
The raised type button is also a rectangle but has a shadow.
The fab type button is a circle with a shadow.
デフォルト値は flat です。
<igx-dialog rightButtonType="fab" rightButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>ダイアログの title を制御する @Input プロパティ。
<igx-dialog title="Notification" #alert leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"></igx-dialog>「ダイアログ以外のクリックで閉じる」機能を有効にする @Input プロパティ。デフォルトで無効です。
<igx-dialog closeOnOutsideSelect="true" leftButtonLabel="Cancel" (onLeftButtonSelect)="dialog.close()"
rightButtonLabel="OK" rightButtonRipple="#4CAF50" (onRightButtonSelect)="onDialogOKSelected($event)">
</igx-dialog>「ダイアログ以外のクリックで閉じる」機能を有効にする @Input プロパティ。デフォルトで無効です。
<igx-dialog closeOnOutsideSelect="true" leftButtonLabel="Cancel" (onLeftButtonSelect)="dialog.close()"
rightButtonLabel="OK" rightButtonRipple="#4CAF50" (onRightButtonSelect)="onDialogOKSelected($event)">
</igx-dialog>ダイアログがエンド ユーザーで表示されるかどうかを返します。
@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
let dialogOpen = this.dialog.isOpen;
}Get the position and animation settings used by the dialog.
@ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
let currentPosition: PositionSettings = this.alert.positionSettingsSet the position and animation settings used by the dialog.
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;
}ダイアログを閉じるメソッド。
ダイアログを開くメソッド。
ダイアログを開く/閉じるメソッド。
Ignite UI for Angular Dialog Window - ヘルプ
Ignite UI Dialog Window はダイアログ ウィンドウをユーザーに表示します。簡易なメッセージを表示するか、サインイン フォームなどの複雑なビジュアルを表示できます。 カスタム アクションのために提供される右および左ボタンもあります。
例:
<button (click)="form.open()">Show Dialog</button> <igx-dialog #form title="Sign In" rightButtonLabel="OK"> <div> <input type="text" igxInput/> <label igxLabel>Username</label> </div> <div> <input type="password" igxInput/> <label igxLabel>Password</label> </div> </igx-dialog>