Display the v-snackbar (from Vuetify) with a stack display
npm install v-snackbarsv-snackbar (from Vuetify) with a stack display
bash
npm install v-snackbars
`
Demo
See it in action: https://codesandbox.io/s/v-snackbars-demo-8xrbr?file=/src/App.vue
How to use
`js
import VSnackbars from "v-snackbars"
export default {
components:{
"v-snackbars": VSnackbars
},
[…]
}
`
`vue
`
You need to provide a messages array. Using a push on the array will cause the text to be shown in a snackbar.
For example, to display _"This is a message"_, just do the below:
`javascript
this.messages.push("This is a message");
`
You can use the same options as the v-snackbar. For example:
`vue
`
$3
#### Snackbar Options
The same v-snackbar options should be applicable, like bottom, right, left, top, color, timeout, ….
$3
You can use v-slot:default to customize the content of the snackbar.
For example:
`vue
Header
{{ message }}
`
The parameter:
- message: the current message that is displayed in the notification
- id: the unique key/id of the message
- index: the index in the array of notifications/messages
#### Personalized button
A close button is used by default. If you prefer to define your own action button, you can use a v-slot:action.
For example:
`vue
Dismiss
`
By clicking on Dismiss, it will remove the related snackbar.
The parameters:
- close: the function to remove a notification
- index: the index in the array of notifications/messages
- message: the current message that is displayed in the notification
- id: the unique key/id of the message
Objects
If you want to customize each snackbar, you can also pass a objects instead of messages, which will contain the various props (like message, color, timeout, transition, contentClass or the position).
In the JavaScript code:
`javascript
this.objects.push({
message:"Success",
color:"green",
timeout:5000
})
this.objects.push({
message:"Error",
color:"red",
timeout:-1
})
`
In your Vue template:
`vue
`
Check the "Random Toast" button on the demo.
Interactivity
You can add some layers of interactivity with the messages.
For example, you can change the text by doing:
`javascript
this.$set(this.messages, i, "New message to display");
`
To remove a notification, you'll have to use splice:
`javascript
this.messages.splice(i, 1);
``