@txdfe/at-follow-dialog

示例

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