本文实例讲述了Angular2.0实现模态对话框的方法。分享给大家供大家参考,具体如下:
觉得写的比较巧妙的就是样式的选取~记录下
<强> CSS部分
font {
Arial字体类型:“微软YaHei”;
字体大小:12 px;
颜色:# 333333;
}
.ky-modal-content {
min-width: 520 px;
最小高度:240 px;
}
.ky-modal-header {/*高度:40 px; */填充:0 10 px 0 10 px;
}
.ky-modal-title {
字体大小:16 px;
粗细:100;
}
.ky-modal-body {
最小高度:110 px;
text-align:中心;
}
.ky-modal-footer {
高度:30 px;
border-top: 0;
text-align: -webkit-center;
}
.ky-modal-message {
padding-left: 3 px;
vertical-align:中间;
}
.ky-modal-icon {
字体大小:16 px;
vertical-align:中间;
}
.ky-modal-question-icon {
颜色:# ff8000;
}
.ky-modal-check-icon {
颜色:绿色;
}
.ky-modal-exclamation-icon {
颜色:红色;
}
.ky-modal-close {
大纲:没有;
字体大小:30 px;
margin-top: 8 px;
粗细:100;
vertical-align: -webkit-baseline-middle;
}
.vertical-align-center {
显示:flex;
显示:-webkit-box;
显示:-moz-box;
-webkit-box-align:中心;
-moz-box-align:中心;
text-align: -webkit-center;
}
之前
<强> HTML部分
& lt; div [id]=" id "类=澳ＬА眛abindex==?”的角色“对话框”aria-hidden=" true "比;
& lt; div类=澳Ｌ曰翱颉北?
& lt; div class="模式内容ky-modal-content”比;
& lt; div class=" modal-header ky-modal-header”比;
& lt;按钮类型=鞍磁ァ崩?肮乇誯y-modal-close”data-dismiss=澳Ｌ盿ria-label=肮乇铡北?
& lt;跨度aria-hidden=" true "祝辞×& lt;/span>
& lt;/button>
& lt; h5 class=" modal-title ky-modal-title”在{{标题}}& lt;/h5>
& lt;/div>
& lt; div class=" modal-body ky-modal-body vertical-align-center”比;
& lt; div>
& lt;跨度比;& lt;跨度祝辞& lt;我类=[ngClass]“fa ky-modal-icon”=癷conClass”aria-hidden=" true "祝辞& lt;/i> & lt;/span> & lt;/span>
& lt;跨类=" ky-modal-message "在{{消息}}& lt;/span>
& lt;/div>
& lt;/div>
& lt; div class=" modal-footer ky-modal-footer”比;
& lt; ky-button[型]=" conformButtonType " data-dismiss=澳Ｌ?单击)=癱onfirmButtonDown()在{{confirmText}} & lt;/ky-button>
& lt; ky-button[型]=薄叭∠薄癲ata-dismiss=澳Ｌ?单击)=癱ancelButtonDown()在{{cancelText}} & lt;/ky-button>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
之前
<强> JS部分
进口{组件、输入、输出、EventEmitter OnInit} ' @angular/核心”;
@ component ({
moduleId: module.id,
选择器:“ky-modal”,
styleUrls: [’。/ky-modal.css '),
templateUrl:“。/ky-modal.component.html”,
}）
出口类KyModalComponent实现OnInit {
@Input()标题:字符串=";
@Input()类型:字符串=";
@Input()消息:字符串=";
@Input () confirmText:字符串=";
@Input () cancelText:字符串=";
@Input () id:字符串;
@Input () conformButtonType:字符串;
iconType=拔侍狻?
iconClass:任何={fa-question-circle:假的,
“fa-check-circle”:假的,
“fa-exclamation-circle”:虚假};
typeList=[“问题”,“检查”,“感叹”);
actionButtonDown=new EventEmitter @Output () ();
undoButtonDown=new EventEmitter @Output () ();
cancelButtonDown () {
this.undoButtonDown.emit(“事件”);
}
confirmButtonDown () {
this.actionButtonDown.emit(“事件”);
}
确定(){
让=这个;
如果(。类型,,_.contains (that.typeList that.type)) {
那iconType=that.type;
}
that.iconClass [fa - $ {。iconType}圆']=true;
that.iconClass [' ky-modal - $ {。iconType}图标']=true; & lt;/span>
}
ngOnInit () {
this.determine ();
}
}
之前
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》,《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
