uxcore-dialog

uxcore-dialog ui componment for react

Usage no npm install needed!

<script type="module">
  import uxcoreDialog from 'https://cdn.skypack.dev/uxcore-dialog';
</script>

README

uxcore-dialog

Dialog Component base on React.

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads Sauce Test Status

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