Toast
飘字组件
- 由于飘字的使用范围可预估, 为方便使用在原组件的基础上更进一步改为函数式的使用方式。
- 普通信息:
Toast.info(message, duration, callback) - 成功信息:
Toast.success(message, duration, callback) - 失败信息:
Toast.fail(message, duration, callback) - 加载中:
Toast.loading(message, duration, callback) - 移除:
Toast.remove() - 如果不根据设置的时间移除飘字，
duration设置为false，Toast.remove()移除飘字。
示例:
- 显示普通飘字, 如:
Toast.info('只显示信息的toast！', 1000, ()=>{console.log('飘字消失时执行的回调函数');}) - 显示成功信息, 如:
Toast.success('操作成功', 1000, ()=>{console.log('飘字消失时执行的回调函数');}) - 显示失败信息, 如:
Toast.fail('操作失败', 1000, ()=>{console.log('飘字消失时执行的回调函数');}) - 显示加载中, 如:
Toast.loading('加载中...', 1000, ()=>{console.log('飘字消失时执行的回调函数');}) - 移除飘字, 如:
Toast.remove()
方法
属性
事件
Constructor
Toast
Toast
()
Example:
import React, { Component } from "react"
import Button from "phoenix-ui/lib/button"
import Toast from "phoenix-ui/lib/toast"
import Code from "./code/code"
export default class toast extends Component{
constructor(props,context){
super(props,context);
}
showToastInfo(){
Toast.info("只显示信息的toast！只显示信息的toast！只显示信息的toast！", 2000, ()=>{
console.log("额外的执行内容");
});
}
showToastSuccess(){
Toast.success("操作成功操作成功操作成功操作成功操作成功操作成功操作成功操作成功", 2000, ()=>{
console.log("额外的执行内容");
});
}
showToastFail(){
Toast.fail("操作失败", 2000, ()=>{
console.log("额外的执行内容");
});
}
showToastTip(){
Toast.tip("操作提示", 2000, ()=>{
console.log("额外的执行内容");
});
}
showToastLoading(){
Toast.loading("", 2000);
}
removeToastLoading(){
Toast.remove();
}
render(){
return(
<div>
<h2 className="comp-title">Toast</h2>
<h3 className="comp-type">Toast.info(message, duration, callback)</h3>
<div className="content">
<Button phSize="lg" onClick={::this.showToastInfo}>info</Button>
</div>
<Code target="toast-info" />
<h3 className="comp-type">Toast.success(message, duration, callback)</h3>
<div className="content">
<Button phSize="lg" onClick={::this.showToastSuccess}>success</Button>
</div>
<Code target="toast-success" />
<h3 className="comp-type">Toast.fail(message, duration, callback)</h3>
<div className="content">
<Button phSize="lg" onClick={::this.showToastFail}>fail</Button>
</div>
<Code target="toast-fail" />
<h3 className="comp-type">Toast.tip(message, duration, callback)</h3>
<div className="content">
<Button phSize="lg" onClick={::this.showToastTip}>tip</Button>
</div>
<Code target="toast-tip" />
<h3 className="comp-type">Toast.loading(message, duration, callback)</h3>
<div className="content">
<Button phSize="lg" onClick={::this.showToastLoading}>loading</Button>
</div>
<Code target="toast-loading" />
<h3 className="comp-type">Toast.remove()<br/>自定义消失的情况：Toast出现函数设置duration为false</h3>
<div className="content">
<Button phSize="lg" onClick={::this.removeToastLoading}>remove</Button>
</div>
<Code target="toast-remove" />
</div>
);
}
}