标签:color 类型 modal text elb dia content col his
环境准备:
cnpm install ngx-bootstrap-modal --save-dev
impoerts: [BootstrapModalModule.forRoot({container: ducument.body})]
usage:
import { Component } from ‘@angular/core‘;
import { DialogService } from "ngx-bootstrap-modal";
@Component({
selector: ‘app-prooduct-add‘,
template: `
<div class="container">
<button class="btn btn-default" (click)="dialogService.alert(‘提醒‘, ‘确认要删除吗?‘);">Show confirm</button>
<button class="btn btn-default" (click)="showConfirm()">Show confirm</button>
</div>
`
})
export class AppComponent {
constructor(public dialogService:DialogService) {}
showConfirm() {
// confirm 返回的是一个 Promise<boolean> 类型,如果在对话框中点【确认】返回 `true`,其他情况返回 `false`
this.dialogService.confirm(‘提醒‘, ‘确认要删除吗?‘, <BuiltInOptions>{
// 可选项,可以对部分参数重写
}).then((result: boolean) => {
// result
});
}
}
show:
this.dialogService.show(<BuiltInOptions>{ content: ‘保存成功‘, icon: ‘success‘, size: ‘sm‘, showCancelButton: false })
内置模态框包括 alert confirm prompt 三种形态
ngx-bootstrap-modal <BuildOpteions>config:
{ "title": "标题", "content": "内容", "icon": "error|warning|success|info|question", "size": "sm|lg", "showCloseButton": true, "input": "text", "inputValue": "", "inputPlaceholder": "必填项", "inputRequired": true, "inputError": "", "inputAttributes": {}, "showCancelButton": true, "cancelButtonText": "取消", "showConfirmButton": true, "confirmButtonText": "确认", "backdrop": false, "timeout": "3000", "keyboard": true }
标签:color 类型 modal text elb dia content col his
原文地址:http://www.cnblogs.com/Nyan-Workflow-FC/p/7855938.html