Vue Snackbar - Material

PRO

The MaterialSnackbar component helps you to simply create a beautiful notification/alert.

Demo

Hello world! This is a notification message.

<template>
 <material-snackbar
  title="Material Dashboard"
  date="11 mins ago"
  description="Hello, world! This is a notification message."
  :icon="{ component: 'done', color: 'white' }"
  color="success"
/>
</template>

<script>
import MaterialSnackbar from "@/components/MaterialSnackbar.vue";
export default { components: { MaterialSnackbar, }, };
</script>

1<template>
2 <material-snackbar
3  title="Material Dashboard"
4  date="11 mins ago"
5  description="Hello, world! This is a notification message."
6  :icon="{ component: 'done', color: 'white' }"
7  color="success"
8/>
9</template>
10
11<script>
12import MaterialSnackbar from "@/components/MaterialSnackbar.vue";
13export default { components: { MaterialSnackbar, }, };
14</script>

Props Information

Name	Type	Default	Description
title*	string		Used to set the `MaterialSnackbar` title. It is a required prop.
date	string		Used to set the `MaterialSnackbar` date or time.
description	string		Used to set the `MaterialSnackbar` content or description.
color	'primary''secondary''info''success''warning''danger''light''dark'	success	Change the `MaterialSnackbar` background color.
icon	['component', 'color']		`icon` accepts an object that can be used to set the `MaterialSnackbar` icon along with its color. `component` is used to set `snackbar` icon. `color` is used to set snackbar `icon` color.
closeHandler	function		Used to close the `MaterialSnackbar` once the user hit the close button.