Vue Alert - Material

Provide contextual feedback messages for typical user actions with the handful of available and flexible alerts/notifications.

Demo

A simple primary alert with an example link. Give it a click if you like.

<template>
 <material-alert>
  A simple primary alert with
  <a href="javascript:;" class="alert-link text-white">an example link</a>. 
  Give it a click if you like.
 </material-alert>
</template>

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

1<template>
2 <material-alert>
3  A simple primary alert with
4  <a href="javascript:;" class="alert-link text-white">an example link</a>. 
5  Give it a click if you like.
6 </material-alert>
7</template>
8
9<script>
10import MaterialAlert from "@/components/MaterialAlert.vue";
11export default {
12   components: { MaterialAlert },
13 };
14</script>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''danger''light''dark'	success	Change the `MaterialAlert` background color.
icon	String		used to set `icon` to the `MaterialAlert`.
dismissible	bool	false	If `true` the `MaterialAlert` will have a closing button for dismissing it.
slot	node		The `MaterialAlert` has a default slot that you can pass node or content inside it.

With Icon

A simple primary alert with icon.

<template>
 <material-alert color="info" icon="ni ni-like-2 ni-lg">
 A simple primary alert with icon.
 </material-alert>
</template>

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

1<template>
2 <material-alert color="info" icon="ni ni-like-2 ni-lg">
3 A simple primary alert with icon.
4 </material-alert>
5</template>
6
7<script>
8import MaterialAlert from "@/components/MaterialAlert.vue";
9export default {
10  components: { MaterialAlert },
11 };
12</script>

Dismissible

A simple dismissible dark alert with icon.

<template>
<material-alert color="dark" icon="ni ni-like-2 ni-lg" dismissible>
 A simple dismissible <strong>dark</strong> alert with icon.
</material-alert>  
</template>

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

1<template>
2<material-alert color="dark" icon="ni ni-like-2 ni-lg" dismissible>
3 A simple dismissible <strong>dark</strong> alert with icon.
4</material-alert>  
5</template>
6
7<script>
8 import MaterialAlert from "@/components/MaterialAlert.vue";
9 export default {
10   components: { MaterialAlert },
11 }
12</script>