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><button>我知道了</button><button>关闭</button></dialog>

  afterShow:()=>alert('我显示出来了')       afterHide:()=>alert('我又隐藏了')>     

这里是弹窗的内容区域

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!