JSPM – vue-toasted@1.0.32

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)

using the toast object

let myToast = this.$toasted.show("Holla !!");
myToast.text("Changing the text !!!").goAway(1500);

Actions

⚡ You can have single or multiple actions in the toast. take a look at the example below

{
    // you can pass a single action as below
    action : {
        text : 'Cancel',
        onClick : (e) => {
            toast.goAway(0);
        }
    },

    // you can pass a multiple actions as an array of actions
    action : [
        {
            text : 'Cancel',
            onClick : (e) => {
                toast.goAway(0);
            }
        },
        {
            text : 'Undo',
            onClick : (e) => {
                this.$router.push({ name : 'somewhere' })
            }
        }
    ]
}

Icons

☀️ Now Material Icons are supported. you will have to import the material icons into your project. example

{
    // pass the icon name as string
    icon : 'check'
    
    // or you can pass an object
    icon : {
        name : 'watch',
        after : true // this will append the icon to the end of content
    }
}

options

below are the available options

Option	Type's	Default	Description
position	String	'top-right'	Position of the toast container ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']
duration	Number	null	Display time of the toast in millisecond
action	Object, Array	null	Add single or multiple actions to toast `{ text : String, icon : String, onClick : Function }`
fullWidth	Boolean	false	Enable Full Width
className	String, Array	null	Custom css class name of the toast
containerClass	String, Array	null	Custom css classes for toast container
Icon	String, Object	null	Material icon name as string. `{ name : String , after : Boolean }`
theme	String	'primary'	Theme of the toast you prefer ['primary', 'outline', 'bubble']
onComplete	Function	null	Trigger when toast is completed

Reusable Global Toasts

you can register your global toasts under globalToasts. they will be available globally for use in $toasted.global. take a look at the detailed example here

// Global Plugin Register
Vue.use(Toasted, {
  globalToasts : {

    myGlobalToast : function(payload, initiate){
        
        // your logic using payload here...
        
        // initiate(Message/html, option/string)
        // error/show/success/info or an option object
        return initiate("My Deepest Condolence", 'error');
    },
    // my another toast...
  }
});

viola !! now you can use your toast in anywhere

// send your payload to global toast
$toasted.global.myGlobalToast(payload);

Credits

Whoever contributes to this project 😉
Inspired and developed from materialize-css toast.

Enjoy Toasting !!