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

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

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>

Attribute method

isShow :bool type

控制弹窗的显示隐藏的.

title:string type

为空时，不显示标题.

className:string type

弹窗的样式类

timer:number type

定时关闭，可不传。

width:number type

弹窗宽度，不足时，内容区域出现上下滚动

height:number type

弹窗宽度，不足时，内容区域出现上下滚动

buttons:node type

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

okCallback :func type

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

afterShow:func type

显示的回调方法

afterHide:func type

关闭隐藏时的回调方法

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!