Package Exports
- vue-toasted
- vue-toasted/dist/vue-toasted.min.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-toasted) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Introduction
vue-toasted is a cool material toast plugin with variety of options and styles. it is touch compatible and responsive. issues and pr's are always welcome
Checkout the Interactive Demo here.
Usage
It is simple. couple of lines all what you need.
# install it via npm
npm install vue-toasted --save// register the plugin on vue
import Toasted from 'vue-toasted';
Vue.use(Toasted)
// you can also pass options, check options reference below
Vue.use(Toasted, Options)
// you can call like this in your component
this.$toasted.show('hello billo')
// and also
Vue.toasted.show('hola billo');All Good Now you have this cool toast in your project.. let's take a look at the api
API
vue-toasted has methods which makes it much easier to use
methods
all the below methods return the Toasted Object of the toast.
Vue.toasted.success( {string | html } message, {object} options)
// available methods
Vue.toasted.show(message, options)
Vue.toasted.success(message, options)
Vue.toasted.info(message, options)
Vue.toasted.error(message, options)####Toast Object check the examples to see how to manipulate the object.
// html element of the toast
el : HtmlElement
// change text or html of the toast
text : Function(text)
// fadeAway the toast. default delay will be 800ms
goAway : Function(delay = 800)
options
below are the available options
| Option | Description | Values | Default |
|---|---|---|---|
| position | position of the toast container | 'top-right', 'top-left', 'bottom-right', 'bottom-left' | 'top-right' |
| duration | display time of the toast | in millisecond | null |
| className | custom css class name of the toast | null | |
| theme | theme of the toast you prefer | 'primary', 'outline', 'bubble' | 'primary' |
| onComplete | class name of the optional icon font | a callback function | null |
Enjoy Toasting !!