nu-toast-react
NU 「 no-ui 」组件库系统 nu-system,Toast 组件 React 实现。
@y-fe/nu-toast-react
本身不会输出任何样式。
怎么用?
npm i @y-fe/nu-toast-react
or
yarn add @y-fe/nu-toast-react
二次封装
import NuToast from "@y-fe/nu-toast-react";
import "./style.css";
const Toast = NuToast.setDefault({
// 默认值就是这三个,可以自定义
status:['danger','warning','success'],
showTime: 3000
});
export default Toast;
export { NuToast };
NuToast 有两种使用方式。
使用 「 基于DOM 」
import React from 'react';
import { NuToast } from "../../components/Toast";
function PageToast() {
return (
<div>
<NuToast open showTime={3000} status="danger">hello!</NuToast>
</div>
);
}
export default PageToast;
第一种方式是直接采用 Dom 的方式。 NuToast
会在Dom对象创建的时候显示,然后3000
毫秒之后消失。这种方式比较适合在一进入页面的就需要显示一个 toast 的时候使用。
使用 「 基于Function 」
import React, { Component } from "react";
import Toast from "./components/Toast";
function App(){
render() {
return (
<div className={`tac`}>
<button type="button" onClick={()=>{
Toast('toast default');
}}>
显示Toast
</button>
<button type="button" onClick={()=>{
Toast.danger('toast danger');
}}>
显示Toast danger
</button>
<button type="button" onClick={()=>{
Toast.success('toast danger');
}}>
显示Toast danger
</button>
<button type="button" onClick={()=>{
Toast.warning('toast warning');
}}>
显示Toast danger
</button>
</div>
);
}
};
export default App;
很多时候 toast
都是在某项操作之后才触发。
NuToast.setDefault
可以帮助大家在初始化的快速的创建自己的 Toast 系统。
通常我们的全局的 Toast 都是一样的 UI 逻辑,所以只需要在初始化的时候创建即可。
NuToast.setDefault
默认有 ['danger','warning','success']
三个状态,当然你可以基于自己的业务创建属于自己的 Toast 系统。
import NuToast from "@y-fe/nu-toast-react";
const Toast = NuToast.setDefault({
status:['myToast'],
showTime: 3000
});
function App(){
render() {
return (
<div>
<button type="button" onClick={()=>{
Toast('toast default');
}}>
显示Toast
</button>
<button type="button" onClick={()=>{
Toast.myToast('toast myToast');
}}>
显示Toast
</button>
</div>
);
}
};
export default App;
NuToast Api
props | 类型 | 默认值 | 功能 |
---|---|---|---|
children * | node | null | 内容元素 |
className * | string | '' | className |
status | string | - | toast 的状态 |
showTime | number | true | toast 显示的时间 |
NuToast 采用 react-transition-group/css-transition 作为CSS动画解决方案,所有除了以上自定义的 API 之外,还会直接将 css-transition
所有的属性都移接到 NuToast
上。
appear = true,
unmountOnExit = true,
timeout = {
appear: 0,
enter: 300, // 进入的时候 transition 动画时长
exit: 300, // 消失的时候 transition 动画时长
},
classNames = {
appear: '',
appearActive: '_open',
appearDone: '_open',
enter: '_open',
enterActive: '_open',
enterDone: '_open',
exit: '',
exitActive: '',
exitDone: '',
},
因为 css-transition
还是有一定的上手成本,这边为了方便使用直接设定了如上的默认值。
简单的说,你想自定义动画 基于 .nu_toast._open
选择器就可以了。
.nu_toast{
transition: transform 300ms;
transform: translateY(20px);
}
.nu_toast._open{
transform: translateY(0);
}
NuToast.setDefault
Api
props | 类型 | 默认值 | 功能 |
---|---|---|---|
status | array | ['danger', 'warning', 'success'] |
弹窗默认状态 |
对于其它的 porps
都会直接在创建的时候透传到 NuToast
上。