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

f8ca1dd5f31ffa2c29a403c3a3e2a314c6ad4ef4971e9ccb89f279ee59475db8我知道了65281c5ac262bf6d81768915a4a77ac04dc7657165739e8300e24fddb7916981关闭65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68  afterShow:()=>alert('我显示出来了')
      afterHide:()=>alert('我又隐藏了')>
    dc6dce4a544fdca2df29d5ac0ea9906b这里是弹窗的内容区域16b28748ea4df4d9c2150843fecfba68
cdbd04b39aef3204efdba40c011c41db

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!