Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/legomolina/toasty-for-web
Toasty implementation for webs
https://github.com/legomolina/toasty-for-web
css javascript notifications toast website
Last synced: about 1 month ago
JSON representation
Toasty implementation for webs
- Host: GitHub
- URL: https://github.com/legomolina/toasty-for-web
- Owner: legomolina
- License: gpl-3.0
- Created: 2017-04-17T15:21:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T16:05:23.000Z (about 2 years ago)
- Last Synced: 2024-11-07T19:09:25.327Z (2 months ago)
- Topics: css, javascript, notifications, toast, website
- Language: TypeScript
- Size: 457 KB
- Stars: 5
- Watchers: 4
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Toasty for Web
[Toasty](https://github.com/GrenderG/Toasty) implementation for webs.**Idea was taken from [GrenderG](https://github.com/GrenderG) Toasty repository.**
### Npm installation
```bash
npm install toasty-web
```And then require it:
```javascript
const ToastyWeb = require('toasty-web');
```### Manual installation
1. Copy 'style.css' located inside 'dist/styles' into your project and link it with ``````2.
2. Copy the JavaScript file 'dist/scripts/ToastyWeb.umd.js' into your project and include it in your header with ``````. If you are using ES modules you can use the 'dist/scripts/ToastyWeb.esm.js' instead.
3. Enjoy using Toasts!### Usage
To display an error Toast:
```javascript
ToastyWeb.error('404 Not found').show();
```To display a success Toast:
```javascript
ToastyWeb.success('Correct!').show();
```To display an information Toast:
```javascript
ToastyWeb.info('Should you be informed?').show();
```To display a warning Toast:
```javascript
ToastyWeb.warning('Careful with radiation').show();
```All methods above supports a second param to show or not the default icon. Default is true.
```javascript
ToastyWeb.warning('Careful with radiation w/o icon', false).show();
```To display a normal Toast:
```javascript
ToastyWeb.normal('Curious name, Toast').show()
```To display a normal Toast with icon<sup>1</sup>:
```javascript
ToastyWeb.normal('Wow, an icon appears!', 'videogame_asset').show();
```To display a totally custom Toast:
```javascript
ToastyWeb.custom('> echo \'Custom Toast rules!\';', '#11FF00', '#000000', 'computer').show();
```Also, show method has two callbacks:
```javascript
ToastyWeb.success('Correct!').show(function(toastId) {
//When the Toast has been created and it gets the toastId
}, function(toastId) {
//When the Toast has been hid
//If this function returns false, the toast won't be destroyed, just hid
});
```
If you want ommit one of them just set it to `function() { return true; }`.> **(1) Note: all icons must come from [material icons](https://material.io/icons).**
> **(2) Note: if you are using bootstrap is probably that .show class has an !important so you need to uncomment [this](https://github.com/legomolina/Toasty-for-web/blob/master/src/styles/style.scss#L21).**
### Configuration
You can set a custom class for Toast:
```javascript
ToastyWeb.customClassName = "myCustomClass";
```And custom timeOut for Toast dissapear (ms) _default: 2000ms_:
```javascript
ToastyWeb.customTimeOut = 5000;
```### Screenshots
<img src="https://raw.githubusercontent.com/legomolina/Toasty-for-web/master/art/toast.gif">
<img src="https://raw.githubusercontent.com/legomolina/Toasty-for-web/master/art/toast_error.png">
<img src="https://raw.githubusercontent.com/legomolina/Toasty-for-web/master/art/toast_success.png">
<img src="https://raw.githubusercontent.com/legomolina/Toasty-for-web/master/art/toast_info.png">
<img src="https://raw.githubusercontent.com/legomolina/Toasty-for-web/master/art/toast_warning.png">
<img src="https://raw.githubusercontent.com/legomolina/Toasty-for-web/master/art/toast_normal.png">
<img src="https://raw.githubusercontent.com/legomolina/Toasty-for-web/master/art/toast_icon.png">
<img src="https://raw.githubusercontent.com/legomolina/Toasty-for-web/master/art/toast_custom.png">### Build
The project is made with Typescript and SCSS so if you want to make changes you need to build it with
```bash
npm run build
```and generated files will be in `dist/` folder