# Tips

行内提示，展现需要关注的信息

## 使用场景

- 当页面某处需要向用户显示强调的信息时。
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

## basic use

```js
import { Tips, Icon } from 'amos-framework';

const icon = <Icon icon="star" />;

<Tips message="Success Text" type="success" />
<Tips message="Warning text" banner />
<Tips message="long warning text....text....text...text.." banner closable />
<Tips showIcon={false} message="Warning text without icon" banner />
<Tips type="error" message="Error text" banner />
<Tips message="Info Text" type="info" closeText="关闭" />
<Tips icon={icon} message="showIcon = false" type="success" />
```

### 基本使用

基本使用、banner模式、closeText

---demo
```js
import { Tips, Icon } from 'amos-framework';

const icon = <Icon icon="star" />;

ReactDOM.render((
<div>
<Tips message="Success Text" type="success" />
<br />
<Tips message="Warning text" banner />
<br />
<Tips message="long warning text....text....text...text.." banner closable />
<br />
<Tips showIcon={false} message="Warning text without icon" banner />
<br />
<Tips type="error" message="Error text" banner />
<br />
<Tips message="Info Text" type="info" closeText="关闭" />
<br />
<Tips icon={icon} message="showIcon = false" type="success" />
<br />
<Tips icon={icon} message="Success Tips" type="success" showIcon />
<br />
<Tips icon={icon} message="Informational Notes" type="info" showIcon />
<br />
<Tips icon={icon} message="Warning" type="warning" showIcon />
<br />
<Tips icon={icon} message="Error" type="error" showIcon />
<br />
<Tips
  icon={<Icon icon="api" />}
  message="Success Tips"
  description="Success description description description description."
  type="success"
  showIcon
/>
</div>
), _react_runner_);
```
---demoend

### 可关闭

显示关闭按钮，点击可关闭警告提示

---demo
```js
import { Tips, Icon } from 'amos-framework';

const onClose = (e) => {
  console.log(e, 'closed!!!');
};

ReactDOM.render((
<div>
  <Tips
    message="warning text....text....text...text.."
    type="warning"
    closable
    onClose={onClose}
  />
  <br />
  <Tips
    message="Error Text"
    description="Error warning text....text....text...text.."
    type="error"
    closable
    onClose={onClose}
  />
</div>
), _react_runner_);
```
---demoend


### 包裹使用

采用 afterClose 同步卸载

---demo
```js
import { Tips, Icon } from 'amos-framework';

const Panel = Collapse.Panel;

class Demo extends Component {
 state = {
    visible: true
  };

  handleClose = () => {
    this.setState({ visible: false });
  };

  render() {
    const { activeName } = this.state;
    return (
      <div>
        {this.state.visible && <Tips message="Tips Message Text" type="success" closable afterClose={this.handleClose} />}
        <p>提示信息，提示内容区域</p>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

| params  | type | default | description |
| --- | --- | --- | --- |
| afterClose | `() => void` | - | 关闭动画结束后触发的回调函数 |
| banner | boolean | false | 是否用作顶部公告，当为true 时， type 默认值变为 `warning` |
| closable | boolean | 无 | 默认不显示关闭按钮 |
| closeText | `string、ReactNode` | 无 | 自定义关闭按钮 |
| description | `string、ReactNode` | 无 | 警告提示的辅助性文字介绍 |
| icon | ReactNode | - | 自定义图标，`showIcon` 为 `true` 时有效 |
| message | `string、ReactNode` | 无 | 警告提示内容 |
| showIcon | boolean | false | 是否显示辅助图标，当 banner 为 true 时，该默认值变为 `true` |
| type | string | `info` | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` |
| onClose | `(e: MouseEvent) => void` | 无 | 关闭时触发的回调函数 |