• Modal对话框
    • 规则
  • 代码演示
  • API
    • Modal
    • ModalSerivce.alert(title, message, actions?, platform?)
    • ModalSerivce.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?)
    • ModalSerivce.operation(actions?, platform?)

    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`