https://hiyali.github.io/awesome-vue-toast/

:whale: awesome vue2 simple toast
https://hiyali.github.io/awesome-vue-toast/

singleton toast vue-toast vue2 vue2-toast webpack

Last synced: about 2 months ago
JSON representation

:whale: awesome vue2 simple toast

• Host: GitHub
• URL: https://hiyali.github.io/awesome-vue-toast/
• Owner: hiyali
• Created: 2017-02-24T04:12:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-04-06T07:04:29.000Z (over 7 years ago)
• Last Synced: 2024-07-30T11:13:26.259Z (about 2 months ago)
• Topics: singleton, toast, vue-toast, vue2, vue2-toast, webpack
• Language: JavaScript
• Homepage:
• Size: 132 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# awesome-vue-toast

:whale: awesome vue2 simple toast

[![npm package](https://img.shields.io/npm/v/awesome-vue-toast.svg)](https://www.npmjs.com/package/awesome-vue-toast)

* Can be singleton

* Programmable

Changed from [AStaroverov/vue-toast](https://github.com/AStaroverov/vue-toast)

## Example

[Live demo](https://hiyali.github.io/awesome-vue-toast)

### Screenshot

![screenshot](https://raw.githubusercontent.com/hiyali/awesome-vue-toast/master/assets/toast-screenshot.png "screenshot")

## Install

```shell

npm i -S awesome-vue-toast

```

## Usage

```javascript

import Toast from 'awesome-vue-toast'

...

Toast.showToast('Enjoy toast!')

```

### Singleton

```html

  ...

  

  

    ...

    Toast.showToast('Enjoy toast!')

    ...

  

  ...

```

## Option

```javascript

Toast.addMessage({

  text: 'This is success type',

  type: 'success',

  dismissAfter: 3 * 1000

})

```

| option         | type       |  default      | other value  |

| :------------- | :--------- | :------------ | :----------- |

| `text`         | `String`   |               |              |

| `type`         | `String`   | info          | success, warning, danger |

| `dismissAfter` | `Int`      | 5 * 1000      | milliseconds |

## Development / build

```shell

npm run dev # development

npm run build # build

```

## For customization props

| props         | default    | other value    | description    |

| :------------ | :--------- | :------------- | :------------- |

| `position`    | se         | n, s, nw, ne, sw, se | north, south, north west, ... |