# Help 帮助提示

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/help/freepass)
- 平台：PC
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/zms/zujian-help/
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Help]

## 代码演示

### 基础用法

基本用法，提示的位置具体可参考Popover组件的placement属性

```jsx
import React from "react";
import { constants, Help, Layout } from "@weapp/ui";

const { helpClsPrefix } = constants;
const { Row, Col } = Layout;

const prefixCls = `${helpClsPrefix}-demo`;

export default class HelpDemo extends React.PureComponent {
  render() {
    const title = "在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息";
    return (
      <div className={prefixCls}>
        <Row>
          <Col span={6}>
            <div className={`${prefixCls}-line`}>
              提示位置--上左：
              <Help title={title} placement="topLeft" />
            </div>
            <div className={`${prefixCls}-line`}>
              提示位置--上边：
              <Help title={title} placement="top" />
            </div>
            <div className={`${prefixCls}-line`}>
              提示位置--上右：
              <Help title={title} placement="topRight" width={150} />
            </div>
          </Col>
          <Col span={6}>
            <div className={`${prefixCls}-line`}>
              提示位置--下左：
              <Help title={title} placement="bottomLeft" />
            </div>
            <div className={`${prefixCls}-line`}>
              提示位置--下边：
              <Help title={title} placement="bottom" />
            </div>
            <div className={`${prefixCls}-line`}>
              提示位置--下右：
              <Help title={title} placement="bottomRight" />
            </div>
          </Col>
          <Col span={6}>
            <div className={`${prefixCls}-line`}>
              提示位置--左上：
              <Help title={title} placement="leftTop" />
            </div>
            <div className={`${prefixCls}-line`}>
              提示位置--左边：
              <Help title={title} placement="left" />
            </div>
            <div className={`${prefixCls}-line`}>
              提示位置--左下：
              <Help title={title} placement="leftBottom" />
            </div>
          </Col>
          <Col span={6}>
            <div className={`${prefixCls}-line`}>
              提示位置--右上：
              <Help title={title} placement="rightTop" width={150} />
            </div>
            <div className={`${prefixCls}-line`}>
              提示位置--右边：
              <Help title={title} placement="right" width={150} />
            </div>
            <div className={`${prefixCls}-line`}>
              提示位置--右下：
              <Help title={title} placement="rightBottom" width={150} />
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}
```

### 提示文字居中

给help组件添加isCenter设置文字内部居中

```jsx
import React from "react";
import { constants, Help } from "@weapp/ui";

const { helpClsPrefix } = constants;

const prefixCls = `${helpClsPrefix}-demo`;

export default class HelpDemo extends React.PureComponent {
  render() {
    const title = "在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息";
    // const title = '1. 容器组件，适用于对组件内容进行包裹或区隔时使用。'
    return (
      <div style={{ border: '1px solid red', marginRight: 100, marginLeft: 100 }}>
        '测试文字'
        <div className="aaaa"></div>
        <Help title={title} placement="right" width={150} isCenter />
      </div>
    );
  }
}
```

### 自定义弹层样式

通过className复写提示样式

```jsx
import React from "react";
import { constants, Help } from "@weapp/ui";

const { helpClsPrefix } = constants;

const prefixCls = `${helpClsPrefix}-demo`;

export default class HelpDemo extends React.PureComponent {
  render() {
    const title = "在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息";
    return (
      <div className={prefixCls}>
        <Help popoverProps={{ className: `${prefixCls}-custom-popover` }} hasArrow={false} title={title} placement="right" isCenter ></Help>
      </div>
    );
  }
}
```

### 自定义内容

可将问号图标替换为文字或者其他图标

```jsx
import React from "react";
import { constants, Help } from "@weapp/ui";

const { helpClsPrefix } = constants;

const prefixCls = `${helpClsPrefix}-demo`;

export default class HelpDemo extends React.PureComponent {
  render() {
    const title = "在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息";
    return (
      <div className={prefixCls}>
        <Help title={title} placement="right" isCenter ><span>需要帮助？</span></Help>
      </div>
    );
  }
}
```

### 自定义触发方式

通过popoverProps的action配置触发方式，有hover/click两种方式，具体参考Popover组件

```jsx
import React from "react";
import { constants, Help } from "@weapp/ui";

const { helpClsPrefix } = constants;

const prefixCls = `${helpClsPrefix}-demo`;

export default class HelpDemo extends React.PureComponent {
  render() {
    const title = "通过popoverProps的action配置触发方式";
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-line`}>
          click 方式：
          <Help popoverProps={{ action: ["click"] }} title={title} placement="topLeft" />
        </div>
        <div className={`${prefixCls}-line`}>
          hover 方式：
          <Help popoverProps={{ action: ["hover"] }} title={title} />
        </div>
      </div>
    );
  }
}
```

### 全局帮助设置

全局帮助设置

```jsx
import React from "react";
import { Help, constants } from "@weapp/ui";
const { helpClsPrefix } = constants;

const prefixCls = `${helpClsPrefix}-demo`;
export default class HelpDemo extends React.PureComponent {
  render() {
    return (
      <>
        <Help helpUrl={"http://www.baidu.com"} />
        <br />
        <Help helpUrl={"http://www.baidu.com"} ><span className={`${prefixCls}-custom-content`}>需要帮助？</span></Help>
      </>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| title | 提示文字 | string \| ReactElement |  |  |
| placement | 气泡框位置 | PopupPlacement |  | top |
| width | 气泡框宽度 | number \| 'auto' |  |  |
| isCenter | 内部文字是否居中 | boolean |  | false |
| popupClassName | 弹层的 className | string |  |  |
| hasArrow | 是否有箭头 | booloean |  | true |
| popoverProps | Popver 组件的参数 | PopoverProps |  |  |
| helpUrl | 帮助地址 | string |  |  |
### popoverProps 参数：

[详情查看Popover组件文档](/ui/popover)
