# @txdfe/at-follow-dialog

> AT业务组件 - 跟随对话框

Latest version **1.0.3** (published 2020-11-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install @txdfe/at-follow-dialog
pnpm add @txdfe/at-follow-dialog
yarn add @txdfe/at-follow-dialog
bun add @txdfe/at-follow-dialog
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-11-06 |
| First published | 2019-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cyris, teamaxy, bowei.jbw, 2ehao, tod.zx, zuoqi, purple-force |

## Links

- npm: https://www.npmjs.com/package/@txdfe/at-follow-dialog
- Repository: git@gitlab.alibaba-inc.com:aisc/at-components
- npm.io page: https://npm.io/package/@txdfe/at-follow-dialog

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.8.6
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [@txdfe/at](https://npm.io/package/@txdfe/at.md) *
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.15
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [@txdfe/at-theme](https://npm.io/package/@txdfe/at-theme.md) *

## Recent versions

- 1.0.3 (latest) — 2020-11-06
- 1.0.4-alpha.0 (prerelease) — 2020-12-14
- 1.0.2 — 2020-11-05
- 1.0.1 — 2020-01-06
- 1.0.0 — 2020-01-02
- 0.2.1 — 2019-12-04
- 0.2.0 — 2019-11-28

## README

## 示例

```jsx
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 |

---
_Source: https://npm.io/package/@txdfe/at-follow-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._