zarm
Version:
基于 React 的移动端UI库
303 lines (267 loc) • 8.24 kB
Markdown
# Toast 轻提示
## 基础用法
```jsx
import { useState } from 'react';
import { Toast, List, Button } from 'zarm';
const Demo = () => {
return (
<>
<List>
<List.Item
title="普通"
suffix={
<>
<Button
size="xs"
onClick={() => {
Toast.show('提示内容');
}}
>
开启
</Button>
</>
}
/>
</List>
</>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 带图标提示
```jsx
import { useRef } from 'react';
import { Toast, List, Button } from 'zarm';
import { Warning } from '@zarm-design/icons';
const Demo = () => {
return (
<List>
<List.Item
title="加载中"
suffix={
<Button
size="xs"
onClick={() => {
Toast.show({
icon: 'loading',
});
}}
style={{ marginLeft: 12 }}
>
开启
</Button>
}
/>
<List.Item
title="成功"
suffix={
<Button
size="xs"
onClick={() => {
Toast.show({
icon: 'success',
content: '预约成功',
});
}}
>
开启
</Button>
}
/>
<List.Item
title="失败"
suffix={
<Button
size="xs"
onClick={() => {
Toast.show({
icon: 'fail',
content: '预约失败',
});
}}
style={{ marginLeft: 12 }}
>
开启
</Button>
}
/>
<List.Item
title="自定义"
suffix={
<Button
size="xs"
onClick={() => {
Toast.show({
icon: <Warning />,
content: '自定义内容',
});
}}
style={{ marginLeft: 12 }}
>
开启
</Button>
}
/>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 更多用法
```jsx
import { useRef, useState, useEffect } from 'react';
import { Toast, List, Button } from 'zarm';
import { Star } from '@zarm-design/icons';
const Countdown = (props) => {
const [count, setCount] = useState(props.count);
useEffect(() => {
const timer = setInterval(() => {
setCount((value) => {
if (value > 1) return value - 1;
return value;
});
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return <span>{count} 秒后跳转</span>;
};
const Demo = () => {
const containerRef = useRef(null);
return (
<List>
<List.Item
suffix={
<Button
size="xs"
onClick={() => {
Toast.show({
content: '挂载在指定的 div 元素上',
mountContainer: containerRef.current,
});
}}
>
开启
</Button>
}
>
<div ref={containerRef}>指定挂载节点</div>
</List.Item>
<List.Item
title="阻止背景点击"
suffix={
<Button
size="xs"
onClick={() => {
Toast.show({
content: '不可同时进行其他交互',
maskClickable: false,
});
}}
>
开启
</Button>
}
/>
<List.Item
title="动态内容"
suffix={
<Button
size="xs"
onClick={() => {
Toast.show({
icon: 'loading',
content: <Countdown count={5} />,
duration: 5000,
});
}}
>
开启
</Button>
}
/>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 销毁
```jsx
import { useRef } from 'react';
import { Toast, List, Button } from 'zarm';
import { Star } from '@zarm-design/icons';
const Demo = () => {
const ref = React.useRef();
return (
<List>
<List.Item>
<Button
size="xs"
onClick={() => {
ref.current = Toast.show({
content: '提示内容不会消失',
duration: 0,
});
}}
>
开启
</Button>
<Button
size="xs"
onClick={() => {
ref.current?.close();
}}
style={{ marginLeft: 12 }}
>
关闭
</Button>
<Button
size="xs"
onClick={() => {
Toast.clear();
}}
style={{ marginLeft: 12 }}
>
全部清除
</Button>
</List.Item>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## API
| 属性 | 类型 | 默认值 | 说明 |
| :------------- | :-------------------------------------------------- | :------------------ | :--------------------------------- |
| visible | boolean | false | 是否展示 |
| icon | 'success' \| 'fail' \| 'loading' \| React.ReactNode | - | 显示的图标 |
| content | React.ReactNode | - | 显示的内容 |
| duration | number | 2000 | 自动关闭前停留的时间（单位：毫秒） |
| mask | boolean | false | 是否展示遮罩层 |
| maskClassName | string | - | 遮罩层样式名 |
| maskStyle | React.CSSProperties | - | 遮罩层样式 |
| maskColor | string | - | 遮罩层的背景色 |
| maskOpacity | string \| number | - | 遮罩层的透明度 |
| maskClickable | boolean | true | 是否允许背景点击 |
| onMaskClick | () => void | - | 点击遮罩层时触发的回调函数 |
| onOpen | () => void | - | Toast 显示的回调函数 |
| onClose | () => void | - | Toast 隐藏的回调函数 |
| afterOpen | () => void | - | Toast 显示后的回调函数 |
| afterClose | () => void | - | Toast 隐藏后的回调函数 |
| mountContainer | MountContainer | () => document.body | 指定 Toast 挂载的 HTML 节点 |
## 指令式 API
Toast 仅支持指令式调用
### Toast.show
同时间只允许弹出一个轻提示，新出现的 Toast 会将之前正在显示中的 Toast 销毁。
show 方法的返回值为一个对象，包含以下属性：
| 属性 | 类型 | 说明 |
| :---- | :--------- | :--------------- |
| close | () => void | 关闭当前的 Toast |
### Toast.clear
关闭所有显示中的 Toast。
### Toast.config
设置全局配置，支持配置 `duration`、`mask`、`maskClassName`、`maskStyle`、`maskColor`、`maskOpacity`、`maskClickable` 和 `mountContainer`。配置方法如下：
```tsx
Toast.config({ duration: 3000 maskColor: 'black' });
```