1.1.0 • Published 9 years ago
zent-dialog v1.1.0
zent-dialog
基础弹窗组件
这个组件有两种使用方式:
1. 命令式,直接调用openDialog函数。不支持context。
2. Component形式,通过控制visible来显示/隐藏对话框。支持context。
推荐使用openDialog的方式,不用在外部维护一个visible属性,使用更加方便。
如果Dialog内部的代码依赖React的context,请使用组件形式,不要使用openDialog。
openDialog
openDialog(options: object): function
options支持除了visible以外的所有Dialog props。
如果需要Dialog实例的引用,可以传一个函数形式的ref给openDialog,不支持字符串形式的ref。
返回值是一个手动关闭Dialog的函数closeDialog(),closeDialog(false)将不会触发Dialog
的onClose,传其它值或者不传都会触发onClose。
重复调用closeDialog是一个noop操作。
Component API
Dialog组件支持以下props。
| 参数 | 说明 | 类型 | 默认值 | 备选值 |
|---|---|---|---|---|
| title | 自定义弹框标题 | node | '' | |
| children | 弹框内容,这么写的<Dialog>xxxx</Dialog>,不是<Dialog children={xxx}></Dialog> | node | null | |
| footer | 底部内容 | node | null | |
| visible | 是否打开对话框 | bool | false | true, false |
| closeBtn | 是否显示右上角关闭按钮 | bool | true | |
| onClose | 关闭操作回调函数 | func | 空函数 | |
| mask | 是否显示遮罩 | bool | true | |
| maskClosable | 点击遮罩是否可以关闭 | bool | true | |
| className | 自定义额外类名 | string | '' | |
| prefix | 自定义前缀 | string | 'zent' | |
| style | 自定义样式 | object | {} |
指定Dialog宽度
在style中可以指定宽度,e.g. style={{ width: '600px' }}。
默认行为是自适应内容的宽度,同时有最小宽度和最大宽度。
1.1.0
9 years ago
1.1.0-beta4
9 years ago
1.1.0-beta1
9 years ago
1.0.12
9 years ago
1.0.11
9 years ago
1.0.10
9 years ago
1.0.9
9 years ago
1.0.8
9 years ago
1.0.7
9 years ago
1.0.7-beta2
9 years ago
1.0.7-beta1
9 years ago
1.0.6
9 years ago
1.0.5
9 years ago
1.0.4
9 years ago
1.0.3
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
9 years ago