https://github.com/hgnim/websimpletoast
A simple toast frame for the web (用于web的简易吐司框)
https://github.com/hgnim/websimpletoast
css html javascript js toast toast-message toastr web
Last synced: 3 months ago
JSON representation
A simple toast frame for the web (用于web的简易吐司框)
- Host: GitHub
- URL: https://github.com/hgnim/websimpletoast
- Owner: Hgnim
- License: mit
- Created: 2025-01-11T04:56:52.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-13T13:35:05.000Z (5 months ago)
- Last Synced: 2025-02-02T13:52:18.194Z (4 months ago)
- Topics: css, html, javascript, js, toast, toast-message, toastr, web
- Language: JavaScript
- Homepage: https://hgnim.github.io/WebSimpleToast/demo
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebSimpleToast
[English](readme/README-English.md)
WebSimpleToast是一个用于web中的轻量吐司框库。\
使用简单，可扩展样式。
> *只需**5分钟**即可完成部署*
## 引入
可以使用以下几种方法引入该库：
- 从jsDelivr中引入
``` html
```
- jsDelivr在大陆地区的CDN服务被污染，可使用替代域名(fastly.jsdelivr.net):
``` html
```
- 克隆此仓库
## 使用
### 函数定义
``` javascript
async function showToast(message,duration = 3000,toast_class = "",toastContent_class = "",parentId = null,finish=()=>{})
```
- `message`: 要在吐司框内显示的文本内容
- `duration`: 吐司框持续显示的时间
- `toast_class`: 吐司框需要额外添加的css类
- `toastContent_class`: 吐司框内容需要额外添加的css类
- `parentId`: 需要将吐司框添加至的父容器ID
- 如果值为`null`(默认)，则添加至``
- `finish`: 在吐司框消失后，将会调用此回调函数。
### 示例
``` javascript
//弹出一个内容为"hello"，持续时间为5秒，class包含"test_style test2_style"，父容器为"test_div"的吐司框。
showToast("hello", 5000, "test_style test2_style", undefined, "test_div");
```
## 演示
[演示文件](https://github.com/Hgnim/WebSimpleToast/tree/gh-pages/demo)\
[演示页面](https://hgnim.github.io/WebSimpleToast/demo/)