uxcore-dialog

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() // 关闭当前对话框

Changelog

0.8.11

• CHANGED 新增locale key en_US zh_CN (#44)