@txdfe/at-pop-form

1.0.3 • Public • Published

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' 语言选项

PopFormItem

Form.Item

PopFormSubmit

Form.Submit

PopFormReset

Form.Reset

Readme

Keywords

none

Package Sidebar

Install

npm i @txdfe/at-pop-form

Weekly Downloads

9

Version

1.0.3

License

ISC

Unpacked Size

2.13 MB

Total Files

22

Last publish

Collaborators

  • jiangyuanzhi
  • zhzxang
  • purple-force
  • zuoqi
  • tod.zx
  • 2ehao
  • bowei.jbw
  • teamaxy
  • cyris
  • saviio