libj-vue-plugin-izitoast
v1.5.3
Published
A toast plugin for vue
Downloads
8
Readme
libj-vue-plugin-izitoast
Part of libj tools
A toast plugin for vue. Adds a $toast
variable to every Vue instance and component
Needs Vue to be present globally
Usage
npm install libj-vue-plugin-izitoast
With default theme
import 'libj-vue-plugin-izitoast/dist/libj-vue-plugin-izitoast.default.min.css'
import 'libj-vue-plugin-izitoast'
now in a Vue instance or Vue component you can do this:
/**
*
* @param {Object} options
* @param {String} options.title
* @param {String} options.message
* @param {String} options.color : success, info, error, warning. default: info
* @param {Number} options.timeout : duration. default 5000 milliseconds
* @param {String} options.position : bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center. default: topCenter
* @param {Array} options.buttons
* @param {Boolean} options.close: true
* @param {Boolean} options.closeOnClick: false
* @param {Boolean} options.closeOnEscape: false
* @param {Boolean} options.overlay: false
* @param {Boolean} options.overlayClose: false
* @param {Boolean} options.rtl: false
*/
this.$toast.show(options)
/**
* @param {String} options.title
* @param {String} options.message
* @param {String} options.color
* @param {Function} options.onYes
* @param {Function} options.onNo
* @param {String} options.okButtonText
* @param {String} options.cancelButtonText
*/
this.$toast.ask(options)
Customize theme
You'll need a separate .scss file like (showcase/showcase.scss):
@import 'libj-vue-plugin-izitoast/index.scss';
// Now override izitoast css
.iziToast.iziToast-color-orange {
background: rgba(255, 116, 92,.9) !important;
border-color: rgba(255, 59, 46,.9) !important;
}
Test
- Run this in a separate command line to start node server
node server.js
- Run one of the following to re-create bundles
npm run dev
npm run dev:watch
- Navigate to http://localhost:3000
Build
npm run build
npm run build:watch