https://github.com/jonathan-grah/vue-roaster
Toast alerts (initially developed for Vue.js with a material-design style)
https://github.com/jonathan-grah/vue-roaster
material notifications toasts
Last synced: 11 months ago
JSON representation
Toast alerts (initially developed for Vue.js with a material-design style)
- Host: GitHub
- URL: https://github.com/jonathan-grah/vue-roaster
- Owner: jonathan-grah
- License: mit
- Created: 2019-08-21T12:06:58.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-08-30T10:48:41.000Z (almost 2 years ago)
- Last Synced: 2025-03-18T14:58:26.739Z (over 1 year ago)
- Topics: material, notifications, toasts
- Language: JavaScript
- Size: 1.34 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# toasters
> Toast alerts/notifications (initially developed for Vue.js with a material-design style)
## Installation
`npm install --save --production toasters`
## Usage
**HTML:**
```html
```
**JS:**
```js
import Toast from "toasters";
// example
new Toast({
content: "Hello World",
interactable: false
});
// or
new Toast("Hello World");
// or
new Toast("Hello World", { persistent: true, timeout: 9000 });
```
**Preview:**
## Options
| Option | Type | Default | Description |
| --- | --- | --- | --- |
| **`content`** | String | `""` | The notification message. |
| **`persistent`** | Boolean | `false` | Whether or not the toast is persistent. |
| **`interactable`** | Boolean | `true` | If the toast can be manually closed or not. |
| **`timeout`** | Number | `6000` | How long till the toast disappears. *Note: will be ignored if the toast is persistent.* |
| **`visible`** | Boolean | `true` | If the toast will be visible when instantiated. |
## Potential future additions
- Error handling (i.e. you haven't provided any content for the toast)
- Ability to parse markdown or html
## Contributing
```bash
# install dependencies
npm install
# watch files for changes with webpack
npm run dev
# build for production with minification
npm run build
```