Dialog 開窗

開啟在 UOF X 內置的視窗。

Import 相依

import { UofxDialogModule } from '@uofx/web-components/dialog';

基礎使用方式

快速開啟提示視窗。

import { UofxDialogController } from '@uofx/web-components/dialog';

constructor(private dialogCtrl: UofxDialogController) { }

this.dialogCtrl.alert({
  titleKey: '標題',
  contentKey: '次標題',
  message: '其他訊息'
}).afterClose.subscribe(res => {
  this.message = 'alert closed result is :: ' + res;
})

自定義視窗內容

自訂視窗使用pDialog，套用下列 template 可以呈現和 UOF X 一樣的視窗樣式。

<p-dialog #pDialog [(visible)]="visible">
  <ng-template pTemplate="header">
    <uofx-dialog-header [title]="'標題'"></uofx-dialog-header>
  </ng-template>
  <ng-template pTemplate="content">
    <uofx-dialog-body>
      <div> ... </div>
    </uofx-dialog-body>
  </ng-template>
  <ng-template pTemplate="footer">
    <!-- 如果 uofx-dialog-footer 放置超過3顆按鈕，class 要加上 'buttons-opposite' -->
    <uofx-dialog-footer>
      <uofx-button [mode]="'u-btn-primary'" (click)="onSubmitClick()">Submit</uofx-button>
    </uofx-dialog-footer>
  </ng-template>
</p-dialog>

視窗需要繼承類別UofxDialog，內含一些預設屬性與函式可以使用。

使用this.close()而不是this.ejDialog.hide()是為了讓this.dialogCtrl.crete({ ... }).afterClose可以被訂閱到關閉視窗的事件。

import { UofxDialog } from '@uofx/web-components/dialog';

@Component({
  ...
})
export class NewDialog extends UofxDialog {

  ngOnInit() {
    this.id = this.params.id;
    this.type = this.params.type;
  }

  onSubmitClick() {
    // 送出...

    // 關閉視窗
    this.close();
  }
}

Note

NewDialog不用像以往一樣特別加入倒entryComponents即可使用。

開啟視窗的方式

import { NewDialog } from './dialog.component';

onOpenDialogClick() {
  this.dialogCtrl.create({
    component: NewDialog,
    params: { id: 'H001' }
  }).afterClose.subscribe(res => {
    if (res) ...
  });
};

開啟自訂視窗的方法

函式名稱	大小
create	依照options.size設定，預設為large
createFullScreen	填滿瀏覽器可視區域
createFlexibleScreen	填滿瀏覽器可視區域 90%