VsudSnackbar

PRO

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

Demo

Hello world! This is a notification message.

<template>
 <vsud-snackbar
  title="Soft UI Dashboard"
  description="Hello, world! This is a notification message"
  color="success"
  icon="ni ni-notification-70"
  iconColor="white"
  date="12-06-2022"
 />
</template>

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

1<template>
2 <vsud-snackbar
3  title="Soft UI Dashboard"
4  description="Hello, world! This is a notification message"
5  color="success"
6  icon="ni ni-notification-70"
7  iconColor="white"
8  date="12-06-2022"
9 />
10</template>
11
12<script>
13import VsudSnackbar from "@/components/VsudSnackbar.vue";
14export default {
15 components: {
16  VsudSnackbar,
17   },
18 };
19</script>

Props Information

Name	Type	Default	Description
title*	string		Used to set the `VsudSnackbar` title.
date	string		Used to set the `VsudSnackbar` date or time.
description	string		Used to set the `VsudSnackbar` content or description.
color	'primary''secondary''info''success''warning''danger''light''dark'	success	Change the `VsudSnackbar` background color.
icon	['component', 'color']		`icon` accepts both String and Object that can be used to set the `VsudSnackbar` icon along with its color.
color	string	success	Used to set the `VsudSnackbar` background color.
closeHandler	function		Used to close the `VsudSnackbar` once the user hit the close button.