Modal对话框

用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出 Modal 进行二次确认。

规则

  • 尽可能少用。Modal 会打断用户操作，只用在重要的时候。
  • 标题应该简明，不能超过 1 行；描述内容应该简明、完整，一般不多于 2 行。
  • 操作按钮最多到 3 个（竖排），一般为 1-2 个（横排）；3 个以上建议使用组件 ActionSheet 来完成。
  • 一般将用户最可能点击的按钮，放在右侧。另外，取消按钮应当始终放在左侧。

代码演示

基本用法

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { ModalService } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-modal-basic',
  6.   template: `
  7.     <WingBlank>
  8.       <WhiteSpace></WhiteSpace>
  9.       <div Button (onClick)="showModal('modal1')">text only</div>
  10.       <WhiteSpace></WhiteSpace>
  11.       <Modal [(ngModel)]="this.state.modal1" [transparent]="true" [title]="'Title'" [footer]="footer">
  12.         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
  13.           scoll content... <br />
  14.           scoll content... <br />
  15.           scoll content... <br />
  16.           scoll content... <br />
  17.           scoll content... <br />
  18.           scoll content... <br />
  19.         </div>
  20.       </Modal>
  21.       <div Button (onClick)="showModal('modal2')">popup</div>
  22.       <WhiteSpace></WhiteSpace>
  23.       <Modal [(ngModel)]="this.state.modal2" [popup]="true" [animationType]="'slide-up'" (onClose)="onClose('modal2')">
  24.         <List [renderHeader]="renderHeader" [className]="'popup-list'">
  25.           <ListItem>股票名称</ListItem>
  26.           <ListItem>股票代码</ListItem>
  27.           <ListItem>买入价格</ListItem>
  28.           <ListItem> <div Button [type]="'primary'" (onClick)="onClose('modal2')">买入</div> </ListItem>
  29.         </List>
  30.       </Modal>
  31.       <div Button (onClick)="showModal('modal3')">maskClosable</div>
  32.       <WhiteSpace></WhiteSpace>
  33.       <Modal [(ngModel)]="this.state.modal3" [transparent]="true" [title]="'Title'" [maskClosable]="true" (onClose)="onClose('modal3')">
  34.         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
  35.           scoll content... <br />
  36.           scoll content... <br />
  37.           scoll content... <br />
  38.         </div>
  39.       </Modal>
  40.       <div Button (onClick)="showModal('modal4')">closable</div>
  41.       <WhiteSpace></WhiteSpace>
  42.       <Modal [(ngModel)]="this.state.modal4" [transparent]="true" [title]="'Title'" [closable]="true" (onClose)="onClose('modal4')">
  43.         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
  44.           scoll content... <br />
  45.           scoll content... <br />
  46.           scoll content... <br />
  47.         </div>
  48.       </Modal>
  49.     </WingBlank>
  50.   `,
  51.   styles: [
  52.     `
  53.       .popup-list .am-list-body {
  54.         height: 210px;
  55.         overflow: auto;
  56.       }
  57.     `
  58.   ]
  59. })
  60. export class DemoModalBasicComponent {
  61.   state = {
  62.     modal1: false,
  63.     modal2: false,
  64.     modal3: false,
  65.     modal4: false
  66.   };
  67.   footer = [
  68.     {
  69.       text: 'Ok',
  70.       onPress: () => {
  71.         console.log('ok');
  72.         this.onClose('modal1');
  73.       }
  74.     }
  75.   ];
  76.   footer2 = [
  77.     {
  78.       text: 'Ok',
  79.       onPress: () => {
  80.         console.log('ok');
  81.         this.onClose('modal2');
  82.       }
  83.     }
  84.   ];
  86.   constructor(private _modal: ModalService) {}
  88.   modelChange(event) {
  89.     console.log('asdfasdf', event);
  90.   }
  91.   onClose(key) {
  92.     this.state[key] = false;
  93.   }
  95.   showModal(key) {
  96.     this.state[key] = true;
  97.   }
  99.   renderHeader() {
  100.     return '委托买入';
  101.   }
  102. }

警告弹窗

包含无按钮, 确认框, 多按钮情况。

  1. import { Component } from '@angular/core';
  2. import { ModalService, ToastService } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-modal-alert',
  6.   template: `
  7.     <WingBlank>
  8.       <WhiteSpace></WhiteSpace>
  9.       <div Button (onClick)="showAlert()">customized buttons</div>
  10.       <WhiteSpace></WhiteSpace>
  11.       <div Button (onClick)="showAlertMuchButtons(message)">More than two buttons</div>
  12.       <WhiteSpace></WhiteSpace>
  14.       <ng-template #message>
  15.         <div>More than two buttons</div>
  16.       </ng-template>
  18.       <div Button (onClick)="showPromise()">promise</div>
  19.       <WhiteSpace></WhiteSpace>
  20.     </WingBlank>
  21.   `
  22. })
  23. export class DemoModalAlertComponent {
  24.   constructor(private _modal: ModalService, private _toast: ToastService) {}
  26.   showAlert() {
  27.     ModalService.alert('Delete', 'Are you sure ?', [
  28.       { text: 'Cancel', onPress: () => console.log('cancel') },
  29.       { text: 'OK', onPress: () => console.log('ok') }
  30.     ]);
  31.   }
  33.   showAlertMuchButtons(message) {
  34.     ModalService.alert('Much Buttons', message, [
  35.       { text: 'Button1', onPress: () => console.log('第0个按钮被点击了') },
  36.       { text: 'Button2', onPress: () => console.log('第1个按钮被点击了') },
  37.       { text: 'Button2', onPress: () => console.log('第2个按钮被点击了') }
  38.     ]);
  39.   }
  41.   showPromise() {
  42.     ModalService.alert('Delete', 'Are you sure???', [
  43.       { text: 'Cancel', onPress: () => console.log('cancel') },
  44.       {
  45.         text: 'Ok',
  46.         onPress: () =>
  47.           new Promise(resolve => {
  48.             ToastService.info('onPress Promise', 1000);
  49.             setTimeout(resolve, 1000);
  50.           }),
  51.           style: {
  52.             color: '#ffffff',
  53.             background: '#00ff00'
  54.           }
  55.       }
  56.     ]);
  57.   }
  58. }

输入弹窗

包含输入普通文字, 密码, 登录信息样式。

  1. import { Component } from '@angular/core';
  2. import { ModalService, ToastService } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-modal-prompt',
  6.   template: `
  7.     <WingBlank>
  8.       <WhiteSpace></WhiteSpace>
  9.       <div Button (onClick)="showPromptPromise()">promise</div>
  10.       <WhiteSpace></WhiteSpace>
  11.       <div Button (onClick)="showPromptDefault()">defaultValue</div>
  12.       <WhiteSpace></WhiteSpace>
  13.       <div Button (onClick)="showSecure()">secure-text</div>
  14.       <WhiteSpace></WhiteSpace>
  15.       <div Button (onClick)="showCustom()">custom buttons</div>
  16.       <WhiteSpace></WhiteSpace>
  17.       <div Button (onClick)="showLogin()">login-password</div>
  18.       <WhiteSpace></WhiteSpace>
  19.     </WingBlank>
  20.   `
  21. })
  22. export class DemoModalPromptComponent {
  23.   constructor(private _modal: ModalService, private _toast: ToastService) {}
  25.   showPromptPromise() {
  26.     ModalService.prompt(
  27.       'input name',
  28.       'please input your name',
  29.       [
  30.         {
  31.           text: 'Close',
  32.           onPress: value =>
  33.             new Promise(resolve => {
  34.               ToastService.info('onPress promise resolve', 1000);
  35.               setTimeout(() => {
  36.                 resolve();
  37.                 console.log(`value:${value}`);
  38.               }, 1000);
  39.             })
  40.         },
  41.         {
  42.           text: 'Hold on',
  43.           onPress: value =>
  44.             new Promise((resolve, reject) => {
  45.               ToastService.info('onPress promise reject', 1000);
  46.               setTimeout(() => {
  47.                 // reject();
  48.                 console.log(`value:${value}`);
  49.               }, 1000);
  50.             })
  51.         }
  52.       ],
  53.       'default',
  54.       null,
  55.       ['input your name']
  56.     );
  57.   }
  59.   showPromptDefault() {
  60.     ModalService.prompt(
  61.       'defaultValue',
  62.       'defaultValue for prompt',
  63.       [{ text: 'Cancel' }, { text: 'Submit', onPress: value => console.log(`输入的内容:${value}`) }],
  64.       'default',
  65.       ['100']
  66.     );
  67.   }
  69.   showSecure() {
  70.     ModalService.prompt('Password', 'Password Message', password => console.log(`password: ${password}`), 'secure-text');
  71.   }
  73.   showCustom() {
  74.     ModalService.prompt(
  75.       'Password',
  76.       'You can custom buttons',
  77.       [{ text: '取消' }, { text: '提交', onPress: password => console.log(`密码为:${password}`) }],
  78.       'secure-text'
  79.     );
  80.   }
  82.   showLogin() {
  83.     ModalService.prompt(
  84.       'Login',
  85.       'Please input login information',
  86.       (login, password) => console.log(`login: ${login}, password: ${password}`),
  87.       'login-password',
  88.       ['default', '123456'],
  89.       ['Please input name', 'Please input password']
  90.     );
  91.   }
  92. }

操作弹窗

操作对话框。

  1. import { Component } from '@angular/core';
  2. import { ModalService } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-modal-operation',
  6.   template: `
  7.     <WingBlank>
  8.       <WhiteSpace></WhiteSpace>
  9.       <div Button (onClick)="showOpeartion()">operation</div>
  10.       <WhiteSpace></WhiteSpace>
  11.     </WingBlank>
  12.   `
  13. })
  14. export class DemoModalOperationComponent {
  15.   constructor(private _modal: ModalService) {}
  17.   showOpeartion() {
  18.     ModalService.operation([
  19.       { text: '标为未读', onPress: () => console.log('标为未读被点击了') },
  20.       { text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') }
  21.     ]);
  22.   }
  23. }

Modal 对话框 - 图1

API

Modal

属性说明类型默认值
visible对话框是否可见Booleanfalse
closable是否显示关闭按钮Booleanfalse
maskClosable点击蒙层是否允许关闭Booleantrue
onClose点击 x 或 mask 回调(): void无
transparent是否背景透明Booleanfalse
popup是否弹窗模式Booleanfalse
animationType可选: 'slide-down/up' / 'fade' / 'slide'Stringfade
title标题TemplateRef无
footer底部内容Array [{text, onPress}][]
platform (Web Only)设定组件的平台特有样式, 可选值为 android, ios， 默认为 iosStringios'

ModalSerivce.alert(title, message, actions?, platform?)

属性说明类型默认值
title标题String 或 TemplateRef无
message提示信息String 或 TemplateRef无
actions按钮组, [{text, onPress, style}]Array无
platform设定组件的平台特有样式, 可选值为 android, ios， 默认为 iosString'ios'

ModalSerivce.alert(title, message, actions?, platform?).close() 可以在外部关闭 Alert

ModalSerivce.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?)

属性说明类型默认值
title标题String 或 TemplateRef无
message提示信息String 或 TemplateRef无
callbackOrActions按钮组 [{text, onPress}] 或回调函数Array or Function无
typeprompt 的样式String (default, secure-text, login-password)default
defaultValue['', '']String[]-
placeholders['', '']String[]-
platform设定组件的平台特有样式, 可选值为 android, ios， 默认为 iosString'ios'

ModalSerivce.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?).close() 可以在外部关闭 prompt`

ModalSerivce.operation(actions?, platform?)

属性说明类型默认值
actions按钮组, [{text, onPress, style}]Array无
platform设定组件的平台特有样式, 可选值为 android, ios， 默认为 iosString'ios'

ModalSerivce.operation(actions?, platform?).close() 可以在外部关闭 operation`