uxcore-dialog
v0.8.11
Published
uxcore-dialog ui componment for react
Downloads
104
Readme
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() // 关闭当前对话框