Angular2 Layer
Angular2 弹层插件，灵活，简单，丰富，优美
dialog(config:LayerConfig):NgLayerRef，可以用自定义的ComponentClass定义对话框的内容
* alert(config:LayerConfig):NgLayerRef，创建alert弹窗，解决原生弹窗不好看或者和网站风格不搭
* confirm(config:LayerConfig):NgLayerRef，创建confirm弹窗,解决原生弹窗不好看或者和网站风格不搭
* tip(config:LayerConfig):NgLayerRef，生成一个消息提示弹层
* loading(config:LayerConfig):NgLayerRef，生成一个提示加载中（等待）的弹层
```TypeScript
export class NgLayer {
/**
* open a dialog window
* @return {NgLayerRef}
*/
dialog(config:LayerConfig):NgLayerRef
/**
* open a alert window
*
* @return {NgLayerRef}
*/
alert(config:LayerConfig):NgLayerRef
/**
* open a confirm window
*
* @return {NgLayerRef}
*/
confirm(config:LayerConfig):NgLayerRef
/**
* open a message layer
*
* @return {NgLayerRef}
*/
tip(config:LayerConfig):NgLayerRef
/**
* open a loading layer
*
* @return {NgLayerRef}
*/
loading(config:LayerConfig):NgLayerRef
}
```
## NgLayerRef
NgLayerRef 是对弹出层的一个引用，通过这个引用，可以对弹出层进行操作或者指定事件的回调函数
包含如下方法(参数具体含义请看代码注释):
* close():void，关闭弹层，对所有类型的弹出层有效
* showCloseBtn(show:boolean)，是否显示关闭按钮，只对dialog有效
* setTitle(title:string):NgLayerRef，设置弹窗的标题，只适用于dialog
* setMessage(message:string):NgLayerRef，提示消息，对除了dialog之外的弹层有效
* setOkText(ok:string):NgLayerRef，更改“确定”按钮的文本，对alert、confirm有效
* setCancelText(cancel:string):NgLayerRef，更改“取消”按钮的文本，对confirm有效
* setOnClose(callBack:()=>boolean):NgLayerRef，设置弹层被关闭时候的回调函数，所有类型的弹层有效
* ok(okCallback:()=>boolean):NgLayerRef，设置弹层“确定”按钮被点击时的回调函数，对alert、confirm有效
* cancel(cancelCallback:()=>boolean):NgLayerRef，设置弹层“取消”按钮被点击时的回调函数，对confirm有效
```TypeScript
class NgLayerRef{
/**
* destory the layer.
*/
close();
/**
* show close button or not
*/
showCloseBtn(show:boolean):NgLayerRef
/**
* update dialog title. for dialog only
*
* @return {NgLayerRef}
*/
setTitle(title:string):NgLayerRef
/**
* update message of layer
*
* e.g.
*
* ```typescript
* let tip = this.ly.tip("保存成功", 1000, "top", "warn");
* setTimeout(()=>{
* lyRef.setMessage("successfully saved").setTipType("success");
* lyRef.close();
* }, 2000);
*
* ```
* @return {NgLayerRef}
*/
setMessage(message:string):NgLayerRef
/**
* if the callBack return ture, the layer will be closed
*
* e.g.
*
* ```typescript
* let lyRef = this.ly.confirm("are you sure?", "yes", "no");
* lyRef.setOnClose(()=>{
* if(...) return true;
* });
* ```
* @return {NgLayerRef}
*/
setOnClose(callBack:()=>boolean):NgLayerRef
/**
* update "ok" button text, for alert layer or confirm layer
*
* e.g.
*
* ```typescript
*let lyRef = this.ly.confirm("are you sure?", "yes", "no");
*lyRef.setOkText("sure");
* ```
* @return {NgLayerRef}
*/
setOkText(ok:string):NgLayerRef
/**
* update "cancel" button text, for confirm layer only
*
* e.g.
*
* ```typescript
*let lyRef = this.ly.confirm("are you sure?", "yes", "no");
*lyRef.setCancelText("not sure");
* ```
* @return {NgLayerRef}
*/
setCancelText(cancel:string):NgLayerRef
/**
* okCallback called on 'ok' button click. for alert layer or confirm layer
*
* e.g.
*
* ```typescript
*let lyRef = this.ly.confirm("are you sure?", "yes", "no");
*lyRef.ok(()=>{
* ...do something...
* });
* ```
* @return {NgLayerRef}
*/
ok(okCallback:()=>boolean):NgLayerRef
/**
* cancelCallback called on "cancel" button click. for confirm layer only
*
* e.g.
*
* ```typescript
*let lyRef = this.ly.confirm("are you sure?", "yes", "no");
*lyRef.ok(()=>{
* ...do something...
* });
* ```
*
* @return {NgLayerRef}
*/
cancel(cancelCallback:()=>boolean):NgLayerRef
}
```
## LayerConfig
LayerConfig 是弹出层的配置类
* parent:ViewContainerRef，dialog的父组件，如果定义了parent，dialog内部的组件将成为parent的子组件，否则成为根组件
* dialogComponent:any，dialog 内容部分的Component 类
* title:string，dialog的标题
* closeAble:boolean，dialog是否显示关闭按钮
* message:string，tip,loading,alert,confirm弹层的提示文字
* okText:string，确定按钮的文本
* cancelText:string，取消按钮的文本
* align:string，定义 loding和tip弹层的位置，可选值有：top, center, bottom
* isModal:boolean，是否模态，只适用于loading 弹层
* tipDuration:number，tip 弹层的持续时间， 经过指定的时间之后，弹层会自动关闭，单位：毫秒(ms)
* inSelector:string，配置弹层弹出时候的转场效果，实际上是为弹层指定一个class选择器，默认提供可选的值有：rollIn, fallDown, fadeInDown, runIn, bounceIn, splatIn, dropDown, vanishIn, spaceIn, jelly, fadeInUp,
* outSelector:string，配置弹层关闭时候的转场效果，实际上是为弹层指定一个class选择器，以便运用动画。默认提供可选的值有：rollOut, fadeOutDown, bounceOut, vanishOut, spaceOut, boingOut, fadeOutDown
```TypeScript
export class LayerConfig {
/**
* the new component will be a child of parent, if parent is null,
* new component will be a root component of application.
* valid only for dialog leyer
*/
parent:ViewContainerRef;
/**
* a class for creating new component
* valid only for dialog leyer
*/
dialogComponent:any;
/**
* dialog title
* valid only for dialog leyer
*/
title:string;
/**
* show close button or not.
* valid only for dialog leyer
*/
closeAble:boolean;
/**
* message type of tip layer.
* valid for alert, confirm, tip, loading leyer
*/
message:string;
/**
* text of "ok" button.
* valid for alert or confirm leyer
*/
okText:string;
/**
* text of "cancel" button
* valid only for confirm leyer
*/
cancelText:string;
/**
* position of the layer("top", "center", "bottom"), default to "top"
* valid only for loading or tip leyer
*/
align:string;
/**
* modal window or not
* valid only for loading leyer
*/
isModal:boolean;
/**
* layer will be automatic closed after duration(ms)
* valid only for tip leyer
*/
tipDuration:number;
/**
* defined a popup animation by a class selector
* valid for all type leyer.
*
* existing options:
* rollIn, fallDown, fadeInDown, runIn, bounceIn,
* splatIn, dropDown, vanishIn, spaceIn, jelly, fadeInUp,
*/
inSelector:string;
/**
* defined a closeing animation by a class selector
* valid for all type leyer.
*
* existing options:
* rollOut, fadeOutDown, bounceOut, vanishOut, spaceOut,
* boingOut, fadeOutDown
*/
outSelector:string;
}
```
#Usage
##step 1
config systemjs.config.js
```JavaScript
(function(global) {
System.config({
paths: {'npm:': 'node_modules/'},
map: {
...
"ng2Layer":"npm:angular2-layer/ng2-layer.min.js"
}
});
})(this);
```
##step 2
import css
```html
...
...
```
##step 3
use it
```TypeScript
···
import {NgLayer, NgLayerRef} from "ng2Layer";
@Component(···)
export class AppComponent {
constructor(private ly:NgLayer, private vcRef:ViewContainerRef) {
let dialog = ly.dialog(···);
let alert = ly.alert(···);
let confirm = ly.confirm(···);
let loading = ly.loading(···);
let tip = ly.tip(···);
}
}
```
#Demo code
talk is cheape, show you my code
##app.ts
```TypeScript
import {Component,NgModule,ViewContainerRef,enableProdMode} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {NgLayer, NgLayerRef} from "../../ng2-layer.js";
enableProdMode();
class DataShare {
somedata:any;
}
@Component({
selector: '.app',
templateUrl: 'temp/app.html',
providers: [NgLayer, DataShare]
})
export class AppComponent {
constructor(private ly:NgLayer, private vcRef:ViewContainerRef, private data:DataShare) {
data.somedata = "水牛叔叔";
}
dialog() {
//dynamic component class
@Component({templateUrl: "temp/dialog.html"})
class DialogComponet {
constructor(private ly:NgLayerRef, private data:DataShare){}
setTitle(){this.ly.setTitle("Angular2 Layer Title");}
close(){this.ly.close();}
showCloseBtn(){this.ly.showCloseBtn(true)};
}
/**
* if parent is provided,
* the new component will be a child of parent component
*/
let dialog = this.ly.dialog({
parent:this.vcRef,
dialogComponent:DialogComponet,
closeAble:false
});
}
alert(){
let alert = this.ly.alert({
message:"所有工作已经完成",
});
alert.ok(()=> {return true;});
}
confirm(){
let confirm = this.ly.confirm({
message:"删除后无法恢复,确定删除吗?"
});
confirm
.ok(()=> {return true;})
.cancel(()=> {return true;});
}
loading(){
let loading = this.ly.loading({message:"loading...",isModal:true});
setTimeout(()=>loading.setMessage("再等一会..."), 2000);
setTimeout(()=>loading.close(), 4000);
}
tip(){
let tip = this.ly.tip({
message:"saving...",
align:"top"
});
setTimeout(()=>{
tip.setMessage("successfully saved").setTipType("success");
}, 1000)
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers:[DataShare]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
```
##index.html
```html
Angular2 弹层插件，灵活，简单，丰富，优美