at-pop-form
简介
基于 at 组件库 Balloon 和 Form 组件完成的一个浮窗表单组件
使用示例
萨波
import PopForm from '@txdfe/at-pop-form';
class Demo extends React.Component {
onConfirm(data) {
console.log(data)
// { test1: value }
}
render() {
return (
<PopForm
title="pop form title"
trigger={ <button className='trigger button'>Trigger</button> }
submitText="submit"
onSubmit={ this.onConfirm }
onChange={ this.onChange }
>
<PopForm.Item label='TEST'>
<Input placeholder='test placeholder' name='test1' />
</PopForm.Item>
</PopForm>
);
}
}
ReactDOM.render(<Demo />, mountNode);
API
PopForm
参数 | 类型 | 可选值 | 默认值 | 是否必填 | 说明 |
---|---|---|---|---|---|
title | String | 无 | 无 | 是 | 设置浮窗表单的标题 |
trigger | any | 无 | <span /> | 是 | 触发元素 |
headerClassName | String | 无 | 无 | 否 | 浮窗 header 部分 className |
headerStyle | String | 无 | 无 | 否 | 浮窗 header 部分 style |
icon | String ReactNode |
无 | 无 | 否 | 浮窗 header 左上角图标内容 |
children | any | 无 | 无 | 否 | 浮窗表单部分内容,建议使用 PopForm.Item 填充内容 |
visible | boolean | true | false | 无 | 否 | 控制当前浮窗表单时候显示 |
onSubmit | Function | 无 | 无 | 否 | 点击浮窗表单中确认按钮的回调函数,接收一个参数,为表单的值 |
onChange | Function | 无 | 无 | 否 | 表单变化回调 签名: Function(values: Object,item: Object) => void 参数: values: {Object} 表单数据 item: {Object} 详细 item.name: {String} 变化的组件名 item.value: {String} 变化的数据 item.field: {Object} field 实例 |
footer | Boolean | ReactNode | true | false | true | 否 | 设置为 Boolean 值则控制 footer 是否显示 设置为 ReactNode 即可自定义 footer 的内容 |
value | Object | 无 | {} | 否 | 表单值 |
submitText | String | 无 | zh-cn: '确认' en: 'Confirm' |
否 | 确认按钮的文字内容 |
submitDisabled | Boolean | true | false | fasle | 否 | 控制确认按钮是否禁用 |
submitLoading | Boolean | true | false | false | 否 | 控制确认按钮是否 loading |
footerClassName | String | 无 | 无 | 否 | 浮窗 footer 部分 className |
footerStyle | String | 无 | 无 | 否 | 浮窗 footer 部分 style |
align | String | 't'(上) 'r'(右) 'b'(下) 'l'(左) 'tl'(上左) 'tr'(上右) 'bl'(下左) 'br'(下右) 'lt'(左上) 'lb'(左下) 'rt'(右上) 'rb'(右下 及其 两两组合) |
'b' | 否 | 浮窗弹出的位置 |
offset | Array | 无 | [0, 0] | 否 | 弹层相对于trigger的定位的微调 |
onClose | Function | 无 | 无 | 否 | 任何 visible 为 false 时会触发的事件 |
delay | Number | 无 | 无 | 否 | 弹层在触发以后的延时显示, 单位毫秒 ms |
afterClose | Function | 无 | 无 | 否 | 浮层关闭后触发的事件, 如果有动画,则在动画结束后触发 |
shouldUpdatePosition | Boolean | 无 | 无 | 否 | 强制更新定位信息 |
autoFocus | Boolean | true | false | true | 否 | 弹层出现后是否自动focus到内部第一个元素 |
safeNode | String | 无 | 无 | 否 | 安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象 |
safeId | String | 无 | 无 | 否 | 用来指定safeNode节点的id,和safeNode配合使用 |
animation | Object | Boolean | 无 | { in: 'zoomIn', out: 'zoomOut' } |
否 | 配置动画的播放方式 |
cache | Boolean | 无 | false | 否 | 弹层的dom节点关闭时是否删除 |
popupContainer | String | Function | 无 | 无 | 否 | 指定浮层渲染的父节点, 可以为节点id的字符串,也可以返回节点的函数。 |
popupStyle | Object | 无 | 无 | 否 | 弹层组件 style,透传给 Popup |
popupClassName | String | 无 | 无 | 否 | 弹层组件 className,透传给 Popup |
popupProps | Object | 无 | {} | 否 | 弹层组件属性,透传给 Popup |
id | String | 无 | 无 | 否 | 弹层id, 传入值才会支持无障碍 |
language | String | 'zh-cn' | 'en' | 'zh-cn' | 否 | 语言选项 |