Class IgxDialogComponent

Ignite UI for Angular Dialog Window - ヘルプ

Ignite UI Dialog Window はダイアログ ウィンドウをユーザーに表示します。 簡易なメッセージを表示するか、サインイン フォームなどの複雑なビジュアルを表示できます。 カスタム アクションのために提供される右および左ボタンもあります。

例:

<button type="button" igxButton (click)="form.open()">Show Dialog</button>
<igx-dialog #form title="Sign In" rightButtonLabel="OK">
<div>
<igx-input-group>
<input type="text" igxInput/>
<label igxLabel>Username</label>
</igx-input-group>
</div>
<div>
<igx-input-group>
<input type="password" igxInput/>
<label igxLabel>Password</label>
</igx-input-group>
</div>
</igx-dialog>

階層

Hierarchy

  • IgxDialogComponent

実装

コンストラクター

プロパティ

closed: EventEmitter<IDialogEventArgs> = ...

ダイアログが閉じた後に発生されるイベントです。

<igx-dialog (closed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
closing: EventEmitter<IDialogCancellableEventArgs> = ...

ダイアログが閉じる前に発生されるイベントです。

<igx-dialog (closing)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
focusTrap: boolean = true

Tab キー フォーカスが開いたときにダイアログ内にトラップされるかどうかを設定する

Input

プロパティです。 デフォルト値は true です。

<igx-dialog focusTrap="false""></igx-dialog>
id: string = ...

Input

id 属性の値を設定する @Input プロパティです。提供されていない場合は、自動的に生成されます。

<igx-dialog [id]="'igx-dialog-56'" #alert title="Notification"
leftButtonLabel="OK" (leftButtonSelect)="alert.close()">
</igx-dialog>
leftButtonBackgroundColor: string = ''

Input

左ボタンの background-color を設定する @Input プロパティです。プロパティをすべての有効な CSS 色プロパティ値に設定できます。

<igx-dialog leftButtonBackgroundColor="black" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
leftButtonColor: string = ''

左ボタンの色を設定する

Input

プロパティです。プロパティをすべての有効な CSS 色プロパティ値に設定できます。

<igx-dialog leftButtonColor="yellow" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
leftButtonLabel: string = ''

Input

ダイアログの左ボタンの label を設定する @Input プロパティです。

<igx-dialog leftButtonLabel="OKAY" #alert title="Notification"  (leftButtonSelect)="alert.close()"></igx-dialog>
leftButtonRipple: string = ''

Input

左ボタンの ripple を設定する @Input プロパティです。ripple はコンポーネントのクリック/タップをフェードするウェーブのシリーズとしてアニメーションを再生します。 プロパティをすべての有効な CSS 色プロパティ値に設定できます。

<igx-dialog leftButtonRipple="green" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
leftButtonSelect: EventEmitter<IDialogEventArgs> = ...

左ボタンがクリックしたときに発生されるイベントです。

<igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
</igx-dialog>
leftButtonType: IgxButtonType = 'flat'

Input

左ボタンの type を設定する @Input プロパティです。有効な値は flatraised および fab です。 flat タイプのボタンは長方形で影なし。
raised タイプボタンは長方形で影あり。
fab タイプ ボタンは円形で影あり。
デフォルト値は flat です。

<igx-dialog leftButtonType="raised" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
message: string = ''

Input

ダイアログの message を制御する @Input プロパティです。

<igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
opened: EventEmitter<IDialogEventArgs> = ...

ダイアログが開いた後に発生されるイベントです。

<igx-dialog (opened)="onDialogOpenedHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
opening: EventEmitter<IDialogCancellableEventArgs> = ...

ダイアログが開く前に発生されるイベントです。

<igx-dialog (opening)="onDialogOpenHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
rightButtonBackgroundColor: string = ''

Input

右ボタンの background-color を設定する @Input プロパティです。プロパティをすべての有効な CSS 色プロパティ値に設定できます。

<igx-dialog rightButtonBackgroundColor="black" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
rightButtonColor: string = ''

Input

右ボタンの color を設定する @Input プロパティです。プロパティをすべての有効な CSS 色プロパティ値に設定できます。

<igx-dialog rightButtonColor="yellow" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
rightButtonLabel: string = ''

Input

ダイアログの右ボタンの label を設定する @Input プロパティです。

<igx-dialog rightButtonLabel="OKAY" #alert title="Notification"  (leftButtonSelect)="alert.close()"></igx-dialog>
rightButtonRipple: string = ''

Input

右ボタンの ripple を設定する @Input プロパティです。

<igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
rightButtonSelect: EventEmitter<IDialogEventArgs> = ...

右ボタンがクリックしたときに発生されるイベントです。

<igx-dialog (rightButtonSelect)="onDialogOKSelected($event)"
#dialog title="Confirmation" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"
rightButtonRipple="#4CAF50" closeOnOutsideSelect="true">
</igx-dialog>
rightButtonType: IgxButtonType = 'flat'

Input

右ボタンの type を設定する @Input プロパティです。有効な値は flatraised および fab です。 flat タイプのボタンは長方形で影なし。
raised タイプボタンは長方形で影あり。
fab タイプ ボタンは円形で影あり。
デフォルト値は flat です。

<igx-dialog rightButtonType="fab" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
title: string = ''

Input

ダイアログの title を制御する @Input プロパティです。

<igx-dialog title="Notification" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>

アクセサー

  • get closeOnOutsideSelect(): boolean
  • Input

    「ダイアログ以外のクリックで閉じる」機能を有効にする @Input プロパティです。デフォルトで無効です。

    <igx-dialog closeOnOutsideSelect="true" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()"
    rightButtonLabel="OK" rightButtonRipple="#4CAF50" (rightButtonSelect)="onDialogOKSelected($event)">
    </igx-dialog>

    返却 boolean

  • set closeOnOutsideSelect(val): void
  • パラメーター

    • val: boolean

    返却 void

  • get positionSettings(): PositionSettings
  • ダイアログで使用される位置とアニメーション設定を取得します。

    @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
    let currentPosition: PositionSettings = this.alert.positionSettings

    返却 PositionSettings

  • set positionSettings(settings): void
  • ダイアログで使用される位置とアニメーション設定を設定します。

    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;

    パラメーター

    返却 void

  • get role(): "dialog" | "alertdialog" | "alert"
  • ダイアログのロールの値を返します。T有効な値は dialogalertdialog、または alert です。

    @ViewChild("MyDialog")
    public dialog: IgxDialogComponent;
    ngAfterViewInit() {
    let dialogRole = this.dialog.role;
    }

    返却 "dialog" | "alertdialog" | "alert"

  • get state(): string
  • 状態の値を返します。利用可能な状態値は "open" または "close" です。

    @ViewChild("MyDialog")
    public dialog: IgxDialogComponent;
    ngAfterViewInit() {
    let dialogState = this.dialog.state;
    }

    返却 string

メソッド