# tebon_toast

> 通用toast组件

Latest version **1.0.1** (published 2021-11-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install tebon_toast
pnpm add tebon_toast
yarn add tebon_toast
bun add tebon_toast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-11-19 |
| First published | 2021-11-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | shujian |
| Maintainers | tebon-fe |

## Links

- npm: https://www.npmjs.com/package/tebon_toast
- npm.io page: https://npm.io/package/tebon_toast

## Recent versions

- 1.0.1 (latest) — 2021-11-19
- 1.0.0 — 2021-11-19

## README

## # tebon_toast
> 通用toast组件。

**[Demo示例](http://192.168.140.40:42500/web-modules/toast/demo/dist/test.html)**       
**[前往GitLab](http://gitlab.tebonlocal.cn/tots-group/front-end/tebon-web-modules/tree/master/web-modules/toast)**

## 安装
### 方式一：通过import方式引入
```
npm install tebon_toast
```
```javascript
import toast from 'tebon_toast';
toast.show('网络出错了！');
```

### 方式二：内联html文件
```bash
npm install tebon_toast
# 安装 raw-loader，要求版本号为 0.5.1 版本
npm install raw-loader@0.5.1
```
在 html 文件内使用 \<script\> 标签内联引入
```html
<script>${require('raw-loader!tebon_toast/dist/toast.min.js')}</script>
<script>
  toast.show('网络出错了！');
</script>
```
**由于此组件使用了`document.body`方法，所以必须在\<body\>标签内引用此组件，否则会出现报错;**，使用此方式引入组件。必须在最靠近 `<body>` 标签的位置使用 `<script>` 标签引入。

## 使用方式
```javascript
/* 显示，1秒后隐藏，默认0.5秒 */
toast.show('hello', 1000);
/* 修改toast样式 */
toast.show('hello', 1000, { size: 20 });
/* 修改toast样式，支持不填写时间，默认0.5秒 */
toast.show('hello', {
  size: 40,
  color: 'white',
  background: 'green'
})
```
### API
**toast.show(content[, showTime[, styleSet]]);**

属性 | 类型 | 默认值 | 是否必填 | 说明  
-|-|-|-|-|
content | String | 无 | 是 | toast显示的文本
showTime | Number | 500 | 否 | toast持续时间
styleSet | Object | 无 | 否 | toast消失之前采用的样式，具体设置项查看下方styelSet

**styleSet 支持属性如下**

属性 | 类型 | 默认值 | 是否必填 | 说明  
-|-|-|-|-|
color | String | 无 | 否 | toast字体颜色
size | Number | 无 | 否 | toast字体大小，**注意：不要带px单位，否则会导致字体设置失效！**
background | String | 无 | 否 | toast背景，与size一样，传入的即为background属性的值。

---
_Source: https://npm.io/package/tebon_toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._