1.0.0 • Published 2 years ago
@la-ots/pelican-vue-toast-notification v1.0.0
Vue Toast Notification
Pelican Toast Notification
Installation
npm i @la-ots/pelican-vue-toast-notification
Usage
import Vue from 'vue';
import VueToast from '@la-ots/pelican-vue-toast-notification/src/index.js';
// Import one of the available themes
import '@la-ots/pelican-vue-toast-notification/src/themes/default/index.scss';
//or theme with icons
//import '@la-ots/pelican-vue-toast-notification/src/themes/sugar/index.scss';
Vue.use(VueToast);
//Vue.$toast.open({/* options */});
let instance = Vue.$toast.open('You did it!');
// Force dismiss specific toast
instance.dismiss();
// Dismiss all opened toast immediately
Vue.$toast.clear();
Available options
The API methods accepts these options:
Attribute | Type | Default | Description |
---|---|---|---|
message | String | -- | Message text/html (required) |
type | String | success | One of success , info , warning , error , default |
position | String | bottom-right | One of top , bottom , top-right , bottom-right ,top-left , bottom-left |
duration | Number | 3000 | Visibility duration in milliseconds, set to 0 to keep toast visible |
dismissible | Boolean | true | Allow user dismiss by clicking |
onClick | Function | -- | Do something when user clicks |
onDismiss | Function | -- | Do something after toast gets dismissed |
queue | Boolean | false | Wait for existing to dismiss before showing new |
pauseOnHover | Boolean | true | Pause the timer when mouse on over a toast |
API methods
Vue.$toast.open(options)
This is generic method, you can use this method to make any kind of toast.
// Can accept a message as string and apply rest of options from defaults
Vue.$toast.open('Howdy!');
// Can accept an Object of options
Vue.$toast.open({
message: 'Something went wrong!',
type: 'error',
// all of other options may go here
});
Vue.$toast.success(message,?options)
There are some proxy methods to make it more readable.
Vue.$toast.success('Profile saved.', {
// optional options Object
})
Vue.$toast.error(message,?options)
Vue.$toast.warning(message,?options)
Vue.$toast.info(message,?options)
Vue.$toast.default(message,?options)
Global options
You can set options for all the instances during plugin initialization
Vue.use(VueToast, {
// One of the options
position: 'top'
})
Further you can override option when creating new instances
Vue.$toast.success('Order placed.', {
// override the global option
position: 'bottom'
})
## Run examples on your localhost
* Clone this repo
* Make sure you have node-js `>=16.9` and [pnpm](https://pnpm.io/) `>=7.2` pre-installed
* Install dependencies - `pnpm install`
* Run webpack dev server - `npm start`
* This should open the demo page in your default web browser
## Acknowledgements
* Buefy [Toast](https://buefy.org/documentation/toast) component
* ankurk91 [https://github.com/ankurk91/vue-toast-notification]
## License
[MIT](LICENSE.txt) License
1.0.0
2 years ago
1.0.0-beta1
2 years ago