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.close(data)。

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即可使用。

開啟視窗的方式

開啟視窗時可以在params中放入要傳遞進視窗的參數。

如果關閉視窗時有回傳資料(this.close(data))，會在afterClose後的res收到回傳資料。

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

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

開啟自訂視窗的方法

函式名稱	大小
create	開啟基本一般視窗
createFullScreen	填滿瀏覽器可視區域
createFlexibleScreen	填滿瀏覽器可視區域 90%

自訂視窗的可設定的參數

參數類型為 UofxDialogOptions。

名稱	用途
component	要開啟的元件
params	要傳入的參數
size	開窗大小，可設定 xsmall、small、middle、large、xlarge、2xlarge，預設是 large
noPadding	設定開窗內容是否需要 padding
showCloseBtn	是否顯示右上角關閉鈕 (預設顯示)
showMaximizeBtn	是否顯示最大化按鈕 (預設不顯示)
showHeader	是否要顯示header區塊 (預設顯示)