@txdfe/at-follow-dialog

1.0.3 • Public • Published

示例

import AtFollowDialog from '@txdfe/at-follow-dialog';
import { Button } from '@txdfe/at';

class Demo extends React.Component {
  state = {
    visible: false,
    currentStep: 'home',
  }

  toggleVisible = () => {
    this.setState({ visible: !this.state.visible });
  }

  render() {
    const { currentStep, visible } = this.state;
    return (
      <div className='example'>
        <Button
          onClick={this.toggleVisible}
          type="primary"
          id="targetDom"
        >
          Toggle visible
        </Button>
        <AtFollowDialog
          title="AtFollowDialog"
          visible={visible}
          target="targetDom"
          hasBackIcon={currentStep !== 'home'}
          onBackClick={() => this.setState({ currentStep: 'home' })}
          onRequestClose={this.toggleVisible}
          okText="提交"
          onOk={this.toggleVisible}
          align="tc bc"
          offset={[0, 8]}
        >
          {
            currentStep === 'home' &&
            <Button onClick={() => this.setState({ currentStep: '1' })}>next step</Button>
          }
          {
            currentStep === '1' &&
            <div>step 1</div>
          }
        </AtFollowDialog>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

API

参数 类型 可选值 默认值 是否必填 说明
visible Boolean true/false false 控制对话框是否展示,传递trigger时优先使用trigger
trigger ReactNode 触发元素
title ReactNode/String 标题
target null 对话框目标元素,可以是id,也可以是ref。
okText String 确定 底部确认按钮文字
onOk Func 确认按钮点击,不传递时不展示确认按钮
noBodyPadding Boolean true/false false body区域是否有padding
onRequestClose Func 关闭对话框函数
onVisibleChange Func 组件visible改变时回调
okDisabled Boolean 确认按钮是否禁用
okWarning Boolean false 确认按钮是否warning
okType normal, primary primary 确认按钮type
onBackClick Func 设置hasBackIcon时 返回按钮的点击
hasBackIcon Boolean true/false false 是否展示返回按钮
align String 参考Overlay
offset 参考Overlay
container 参考Overlay
hasMask 参考Overlay
disableScroll 参考Overlay
shouldUpdatePosition 参考Overlay

Readme

Keywords

none

Package Sidebar

Install

npm i @txdfe/at-follow-dialog

Weekly Downloads

5

Version

1.0.3

License

ISC

Unpacked Size

1.81 MB

Total Files

12

Last publish

Collaborators

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