Vuejs-snackbar-queue NPM

vuejs-snackbar-queue

A Vuejs snackbar plugin that support multiple snackbars at one time

npm install vuejs-snackbar-queue

import Vue from 'vue'
import SnackbarQueue from 'vuejs-snackbar-queue' 

Vue.use(SnackbarQueue)

Global options can be set when initialize the plugin

import Vue from 'vue'
import SnackbarQueue from 'vuejs-snackbar-queue' 

Vue.use(SnackbarQueue, { maxSnacks: 5, mobileBreakpoint: 600 })

Add the global component to your root component (App.vue)

<snackbar-queue/>

Open a snackbar from your .vue files

this.$snackbar.show({
    message: "Message",
    color: "green",
    timeout: 5000
});

Also you can open a snackbar from other files

import Vue from "vue";

const vue = new Vue();

vue.$snackbar.show({
    message: "Message",
    color: "green",
    timeout: 5000
});

Close all the snackbars by calling hideAll() method

this.$snackbar.hideAll();

Name	Type	Default	Description
maxSnacks	Number	3	Maximum number of snackbars that can be added to the queue
mobileBreakpoint	Number	600	Snackbar is centered horizontally on screens those width below than mobileBreakpoint

Name	Type	Default	Description
message	String	null	Snackbar message
color	String	#333333	Color of the snackbar
timeout	Number	4000	Duration of the snackbar in ms. Use `0` to keep open indefinitely
horizontal	String	center	Horizontal position. Valid values : `center`, `left`, `right`
vertical	String	top	Vertical position. Valid values : `top`, `bottom`
actionText	String	Close	Label of the action button
onAction	Function		Specify a function that should be called when click on the action
transition	String		Transition name

This project is licensed under the MIT License - see the LICENSE.md file for details

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago