react-mobile-layer
React 手机端弹框组件
下载
npm install --save react-moblie-layer
例子
示例一:
import React from 'react';
import {render} from 'react-dom';
import Layer from 'react-mobile-layer';
var LayerExample = React.createClass({
getInitialState: function () {
return {
content:"You can pass in a react components",
layerParam:{
show:true,
btn:"I know"
},
type:'alert'
}
},
render:function(){
return (
<div>
<Layer type={this.state.type} param={this.state.param}>{this.state.content}</Layer>
</div>
)
}
});
render(<LayerExample/>, document.getElementById('dialog'));
示例二:
import React from 'react';
import {render} from 'react-dom';
import Layer from 'react-mobile-layer';
var LayerExample = React.createClass({
showAlert: function () {
this.refs.layer.alert({
content:"You can pass in a react components",
btn:"I know",
ok:function(){
console.log("You click on the confirm button")
}
})
},
render:function(){
return (
<div>
<button onClick={this.showAlert}></button>
<Layer ref='layer'/>
</div>
)
}
});
属性
- content [string] 内容支持传入一个react组件
- btn [string|array] 按钮显示文本的配置, 如果为字符串则设置确定按钮的文本,如果数组([确定,取消])设置确定按钮和取消按钮文本
- ok [function] 确定事件回调
- cancel [function] 取消事件回调
- close [function] 自动关闭事件回调
- time [number] 对话框显示时间,超过时间(单位:秒)将自动关闭,默认2秒
- anim [string] 页面层进入页面方向,有值: up, bottom, left and right
- style [object] 自定义风格配置
- show [Boolean] 是否显示,默认是展示的
方法
alert (object)
/**
* Can receive parameters
* @ param {object}
* content
* btn
* ok
* */
example:
this.refs.layer.alert({
content: "你可以传入一个react组件",
btn: "ok",
ok: function () {}
})
page (object)
/**
* Can receive parameters
* @ param {object}
* content
* anim
* style
* */
example:
this.refs.layer.page({
content: "你可以传入一个react组件",
anim: "up",
style: {height: "300px"}
})
tips (object)
/**
* Can receive parameters
* @ param {object}
* content
* time (Unit s,The default for 2 seconds)
* close
* */
example:
this.refs.layer.tips({
content: "You can pass in a react components",
time: 4,
close: function () {}
})
confirm (object)
/**
* Can receive parameters
* @ param {object}
* content
* btn
* ok
* cancel
* */
example:
this.refs.layer.confirm({
content: "You can pass in a react components",
btn:["ok",'cancel'],
ok: function () {}
cancel:function () {}
})
bottomConfirm (object)
/**
* Can receive parameters
* @ param {object}
* content
* btn
* ok
* cancel
* */
example:
this.refs.layer.bottomConfirm({
content: "You can pass in a react components",
btn:["ok",'cancel'],
ok: function () {}
cancel:function () {}
})
loading (string)
/**
* Can receive parameters
* @ param content
* */
example:
this.refs.layer.loading()
or
this.refs.layer.loading('Waiting...¡¯)
close
Close the layer
example:
this.refs.layer.close()