ngx.superlayer

document live demo

NPM

npm install ngx.superlayer

Release notes

• 2018/7/4——
  • rename from "angular2-layer" to "ngx.superlayer"
  • upgrade to support angular 6
• 2017/4/21——rewrite totally by angular 4, it is more convenient to use
• 2017/1/14——modify LayerConfig; update angular to 4.0
• 2017/1/14——add LayerConfig.imports and LayerConfig.declarations
• 2017/1/12——passing data to the component by LayerConfig.data

Classes

NgxLayer

可以把NgLayer 看作是一个弹出层的factory。NgLayer能够生成五种类型的弹层，分别对应五个方法(参数具体含义请看代码注释):

• dialog(config:LayerConfig):NgxLayerRef,open a dialog window
• alert(config:LayerConfig):NgxLayerRef,open a alert window
• confirm(config:LayerConfig):NgxLayerRef,open a confirm window
• tip(config:LayerConfig):NgxLayerRef,open a message layer
• loading(config:LayerConfig):NgxLayerRef,open a loading layer

NgxLayerRef

NgxLayerRef 是对弹出层的一个引用，通过这个引用，可以对弹出层进行操作或者指定事件的回调函数 包含如下方法(参数具体含义请看代码注释):

• close():void，destory the layer
• showCloseBtn(show:boolean)，show close button or not
• setTitle(title:string):NgxLayerRef，update dialog title. for dialog only
• setMessage(message:string):NgxLayerRef，update message of layer
• setOkText(ok:string):NgxLayerRef，update "ok" button text, for alert layer or confirm layer
• setCancelText(cancel:string):NgxLayerRef，update "cancel" button text, for confirm layer only
• setOnClose(callBack:()=>boolean):NgxLayerRef，if the callBack return ture, the layer will be closed
• ok(okCallback:()=>boolean):NgxLayerRef，okCallback called on 'ok' button click. for alert layer or confirm layer
• cancel(cancelCallback:()=>boolean):NgxLayerRef，cancelCallback called on "cancel" button click. for confirm layer only

LayerConfig

LayerConfig 是弹出层的配置类

• parent:any，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
• dialogComponent:any，dialog dialog body Component
• data:Object，datas pass to dialog component
• title:string，dialog title valid only for dialog leyer
• closeAble:boolean，show close button or not. valid only for dialog leyer
• message:string，message type of tip layer. valid for alert, confirm, tip, loading leyer
• okText:string，text of "ok" button. valid for alert or confirm leyer
• cancelText:string，text of "cancel" button.valid only for confirm leyer
• align:string，position of the layer("top", "center", "bottom"), default to "top" valid only for loading or tip leyer
• isModal:boolean，modal window or not valid only for loading leyer
• tipDuration:number，layer will be automatic closed after duration(ms) valid only for tip leyer
• inSelector:string，defined a popup animation by a class selector valid for all type leyer. existing options: rollIn, fallDown, fadeInDown, runIn, bounceIn, platIn, dropDown, vanishIn, spaceIn, jelly, fadeInUp
• outSelector:string，defined a closeing animation by a class selector valid for all type leyer. existing options: rollOut, fadeOutDown, bounceOut, vanishOut, spaceOut, boingOut, fadeOutDown

Usage & demo

talk is cheape, show you my code

step 1

import css

<link rel="stylesheet" href="node_modules/ngx.superlayer/css/dialog.css" />

step 2

use it

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {NgxLayer, NgxLayerRef, NgxLayerComponent} from "ngx.superlayer";
 
@Component({
    selector: '.app',
    templateUrl: 'temp/app.html',
    providers: [NgxLayer]
})
export class AppComponent {
    constructor(private ly:NgxLayer) {}
    
    config:any = {
        inSelector:"fallDown",
        outSelector:"rollOut",
        title:"angular2 layer",
        align:"top",
        parent: this,
        dialogComponent:DialogComponent,
        closeAble: false
    }
    
    dialog(){
        this.ly.dialog(this.config);
    }
    
    alert(){
        this.ly.alert(this.config);
    }
    
    confirm(){
        this.ly.confirm(this.config);
    }
    
    loading(){
        let tip = this.ly.loading(this.config);
        
        setTimeout(()=>{tip.close();}, 2000)
    }
    
    tip(){
        this.ly.tip(this.config);
    }
}
 
/*component for dialog*/
@Component({
    selector: '.dialog',
    templateUrl: 'temp/dialog.html'
})
export class DialogComponent {
    data = "angular2 layer";
    
    constructor(private ly:NgxLayerRef, private l:NgxLayer) {}
    
    setTitle(){this.ly.setTitle("Ngx Layer Title");}
    
    close(){this.ly.close();}
    
    showCloseBtn(){this.ly.showCloseBtn(true)};
    
    showData(){alert(this.data)};
}
 
@NgModule({
    imports: [BrowserModule],
    entryComponents:[NgxLayerComponent, DialogComponent],
    declarations: [AppComponent, NgxLayerComponent, DialogComponent],
    bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

index.html

<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="../css/dialog.css" />
<link rel="stylesheet" href="css/index.css" />
 
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.min.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
 
<script src="systemjs.config.js"></script>
<script>
    System.import('app').catch();
</script> 
</head>
<body>
    <div class="app">loaing...</div>
</body>
 
</html>

app.html

template of app Component

<button (click)="dialog();">dialog</button>
<button (click)="confirm();">confirm</button>
<button (click)="alert();">alert</button>
<button (click)="loading();">loading</button>
<button (click)="tip();">tip</button>

dialog.html

template of dialog Component

<style>
<style>
.dialog_body{
    width:350px;
    padding:0 50px;
    text-align:center;
}
.dialog_logo img{
    height:80px;
    width:80px;
    display:block;
    margin:0 auto;
}
.dialog_logo h1{
    font-size:30px;
    line-height:1em;
    color:#000;
    font-weight:200;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
}
.dialog_logo p{
    margin:20px 0;
    color:#000;
    text-shadow:0 1px 0 rgba(204, 204, 204, 0.4);
}
.dialog_body button{
    font-size:18px;
}
</style> 
<div class="dialog_body">
    <div class="dialog_logo">
        <img src="image/logo.png"/>
        <h1>Ngx Layer</h1>
        <p>Angular2 弹层插件，灵活，简单，丰富，优美</p>
    </div>
    <button (click)="setTitle();">setTitle</button>
    <button (click)="showCloseBtn();" style="margin:0 10px;">showCloseBtn</button>
    <button (click)="showData();">showData</button>
</div>

Live demo

code is cheape, here is the live demo