uxcore-dialog

Dialog Component base on React.

Development

git clone https://github.com/uxcore/uxcore-dialog
cd uxcore-dialog
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-dialog
cd uxcore-dialog
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/dialog

API

| 参数 | 说明 | 类型 | 默认值 | |------------|----------------|------------------|--------------| | title | Title of the dialog | String | React.Element | 无 | | visible | current dialog's visible status | Boolean | false | | mousePosition | set pageX and pageY of current mouse(it will cause transform origin to be set). | {x:number,y:number} | 无 | | onOk | the callback when ok clicked | function | 无 | | onCancel | the callback when dialog closed | function | 无 | | width | dialog width | String or Number | 520 | | footer | footer of the dialog | React.Element | | | closable | whether show close button and click mask to close | Boolean | true | | maskClosable | whether click mask to close, this prop will be ignored if set closable prop to false | Boolean | false | | locale | 国际化(包括 zh-cn, en-us, 和 pl-pl) | String | zh-cn | | className | additional className for dialog | string | | | wrapClassName | additional className for dialog wrap | string | vertical-center-dailog for vertical align the dialog | | style | Root style for dialog element.Such as width, height | Object | {} | | zIndex | | Number | | | bodyStyle | body style for dialog body element.Such as height | Number | {} | | htmlClassName | the className added to html element when dialog is visible | String | '' | | draggable | drag title for resetting the position of dialog | Boolean | false |

Dialog.xxx()

包括：

• Dialog.info
• Dialog.success
• Dialog.error
• Dialog.confirm

以上均为一个函数，参数为 object，具体属性如下：

| 参数 | 说明 | 类型 | 默认值 | |------------|----------------|------------------|--------------| | title | 标题 | React.Element or String | 无 | | onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | width | 宽度 | String or Number | 416 | | buttonSize | 按钮的尺寸，'small', 'medium', 'large' 三种可选 | String | 'medium'| | icon | 自定义图标,可以自定义样式推荐使用 | Icon Element | uxcore-icon 的实例，http://uxco.re/components/icon/ | | iconClassName | 图标样式名 | String | kuma-icon-caution | | timer | 弹框自动关闭, 2000表示2s以后关闭 | Number, false or null | false | | htmlClassName | the className added to html element when dialog is visible | String | '' | | okText | 确认按钮文字 , 0.7.1 版本后支持 | string | - | | cancelText | 取消按钮文字 , 0.7.1 版本后支持 | string | - |

返回值为一个object，具体属性如下：

• close : 一个用于关闭当前dialog的function

使用方法：

 const myConfirm = Dialog.confirm({title: '这里是标题'},)
 myConfirm.close() // 关闭当前对话框