ticket-message
v0.1.0
Published
Message ui component for react
Downloads
3
Maintainers
Readme
bee-message
Browser Support
| | | | | | | --- | --- | --- | --- | --- | | IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
react bee-message component for tinper-bee
全局展示操作反馈信息。
应用场景:
- 可提供成功、警告和错误等反馈信息。
- 当需要提醒但是不打断操作时,是一种不打断用户操作的轻量级提示方式。
使用方法
const info = function () {
Message.create({content: 'This is a Info message', color: 'info'});
};
class Demo extends Component {
render () {
return (
<Button
colors="info"
onClick={info}>
info
</Button>
)
}
}
样式引入
- 可以使用link引入build目录下Message.css
<link rel="stylesheet" href="./node_modules/bee-message/build/Message.css">
- 可以在js中import样式
import "./node_modules/bee-message/src/Message.scss"
//或是
import "./node_modules/bee-message/build/Message.css"
API
函数api
//设置默认设置
Message.config({
top: 20, //顶上显示时距顶部的位置
bottom: 20, //左下右下显示时距底部的位置
defaultBottom: 20, //底部显示时距底部的位置
duration: 20, //显示持续时间
width: 500 //左下左上右下右上显示时的宽度
});
//销毁所有消息
Message.destroy();
//创建消息
Messsage.create({});
message函数参数
|参数|说明|类型|默认值| |:---|:-----|:----|:------| |content|内容|string/number|-| |duration|显示时间|number|3| |color|颜色|dark/light/success/danger/warning/info/successlight/dangerlight/warninglight/infolight|'dark'| |onClose|关闭时的钩子函数|function|-| |position|位置|top/bottom/topRight/topLeft/bottomRight/bottomLeft|top|
#### 开发调试
```sh
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-message
$ cd bee-message
$ npm install
$ npm run dev