クラス IgxDialogComponent

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>

階層

  • IgxDialogComponent

実装

コンストラクタ

constructor

プロパティ

id

id: string = `igx-dialog-${DIALOG_ID++}`

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

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

leftButtonBackgroundColor

leftButtonBackgroundColor: string = ""

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

<igx-dialog leftButtonBackgroundColor="black" leftButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>

leftButtonColor

leftButtonColor: string = ""

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

<igx-dialog leftButtonColor="yellow" leftButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>

leftButtonLabel

leftButtonLabel: string = ""

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

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

leftButtonRipple

leftButtonRipple: string = ""

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

<igx-dialog leftButtonRipple="green" leftButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>

leftButtonType

leftButtonType: string = "flat"

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

<igx-dialog leftButtonType="raised" leftButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>

message

message: string = ""

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

<igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"></igx-dialog>

onClose

onClose: EventEmitter<IDialogEventArgs> = new EventEmitter<IDialogEventArgs>()

ダイアログが閉じたときに発生されるイベント。

<igx-dialog (onClose)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>

onLeftButtonSelect

onLeftButtonSelect: EventEmitter<IDialogEventArgs> = new EventEmitter<IDialogEventArgs>()

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

<igx-dialog (onLeftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
</igx-dialog>

onOpen

onOpen: EventEmitter<IDialogEventArgs> = new EventEmitter<IDialogEventArgs>()

ダイアログが開いたときに発生されるイベント。

<igx-dialog (onOpen)="onDialogOpenHandler($event)" (onLeftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>

onRightButtonSelect

onRightButtonSelect: EventEmitter<IDialogEventArgs> = new EventEmitter<IDialogEventArgs>()

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

<igx-dialog (onRightButtonSelect)="onDialogOKSelected($event)"
#dialog title="Confirmation" (onLeftButtonSelect)="dialog.close()" rightButtonLabel="OK"
rightButtonRipple="#4CAF50" closeOnOutsideSelect="true">
</igx-dialog>

rightButtonBackgroundColor

rightButtonBackgroundColor: string = ""

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

<igx-dialog rightButtonBackgroundColor="black" rightButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>

rightButtonColor

rightButtonColor: string = ""

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

<igx-dialog rightButtonColor="yellow" rightButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>

rightButtonLabel

rightButtonLabel: string = ""

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

<igx-dialog rightButtonLabel="OKAY" #alert title="Notification"  (onLeftButtonSelect)="alert.close()"></igx-dialog>

rightButtonRipple

rightButtonRipple: string = ""

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

<igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>

rightButtonType

rightButtonType: string = "flat"

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

<igx-dialog rightButtonType="fab" rightButtonLabel="OKAY" #alert (onLeftButtonSelect)="alert.close()"></igx-dialog>

title

title: string = ""

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

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

toggleRef

アクセサー

closeOnEscape

  • get closeOnEscape(): boolean
  • set closeOnEscape(val: boolean): void

closeOnOutsideSelect

  • get closeOnOutsideSelect(): boolean
  • set closeOnOutsideSelect(val: boolean): void
  • 「ダイアログ以外のクリックで閉じる」機能を有効にする @Input プロパティ。デフォルトで無効です。

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

    返却 boolean

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

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

    パラメーター

    • val: boolean

    返却 void

isCollapsed

  • get isCollapsed(): boolean

isModal

  • get isModal(): boolean
  • set isModal(val: boolean): void

isOpen

  • get isOpen(): boolean

positionSettings

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

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

    返却 PositionSettings

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

    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

role

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

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

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

state

  • get state(): string

titleId

  • get titleId(): string

メソッド

close

  • close(): void

ngAfterContentInit

  • ngAfterContentInit(): void

open

toggle

  • toggle(): void