Home > Web Front-end > JS Tutorial > Introduction to x-dailog pop-up window floating layer component

Introduction to x-dailog pop-up window floating layer component

零下一度
Release: 2017-06-26 13:40:33
Original
1843 people have browsed it

react.js plug-in development, x-dailog pop-up floating layer component

I think that every component should have its own style and attribute event callback configuration. So I will give x-dialog a simple default style and various default configuration items. All react plug-in examples will be included in react China.

Demo address: x-dialog various case demonstrations

Source file address:

npm installation

Use npm to install, run

$ npm install x-dialog --save-dev
Copy after login

Calling method

<Dialog 
      isShow: true  title: "这是一个例子"  className:"myClass"  timer:2000  width:300  height:300  buttons: <div><button className="d-ok" onClick={this.hide.bind(this)}>我知道了</button><button className="d-cancel" onClick={this.hide.bind(this)}>关闭</button></div>  afterShow:()=>alert(&#39;我显示出来了&#39;)
      afterHide:()=>alert(&#39;我又隐藏了&#39;)>
    <div>这里是弹窗的内容区域</div>
</Dialog>
Copy after login

Attribute method

isShow :bool type

控制弹窗的显示隐藏的.
Copy after login

title:string type

为空时,不显示标题.
Copy after login

className:string type

弹窗的样式类
Copy after login

timer:number type

定时关闭,可不传。
Copy after login

width:number type

弹窗宽度,不足时,内容区域出现上下滚动
Copy after login
Copy after login

height:number type

弹窗宽度,不足时,内容区域出现上下滚动
Copy after login
Copy after login

buttons:node type

自定义操作区域的按钮,为false类型时不显示操作区域,不传时默认显示 `确定、取消`
Copy after login

okCallback :func type

当默认按钮的情况下时,点击`确定`时的回调方法,点`取消`时直接隐藏,如果需要定制更多的方法,建议传递`buttons`属性。
Copy after login

afterShow:func type

显示的回调方法
Copy after login

afterHide:func type

关闭隐藏时的回调方法
Copy after login

Attachment: react.js download address

The above is the detailed content of Introduction to x-dailog pop-up window floating layer component. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template