1.0.1 • Published 5 years ago
vue-toast-me v1.0.1
vue-toast-me
💪 Amesome & 🤸♀️ flexible toast component for Vue
Collection previews
notification
error
message
award
event
activity
Design previews
material
hipster
bubble
Installation
npm install --save vue-toast-meUsage
main.js
import Vue from "vue";
import VueToastMe from "vue-toast-me";
Vue.use(VueToastMe);Params
| Param name | Data | Values allowed |
|---|---|---|
| design | type: String, default: 'material' | 'material', 'hipster', 'bubble' |
| type | type: String, default: 'notification' | 'notification', 'error', 'message', 'activity', 'award', 'event' |
| text | type: String | any text you want to show in a toast |
| animation-type | type: String, default: 'to-bottom' | 'to-bottom', 'to-top', 'to-right', 'to-left', 'appearing' |
| toast-shadow | type: Boolean, default: true | |
| close-button | type: Boolean, default: false | |
| timer | type: Number, default: 3000 | |
| position | type: String, default: 'top right' | 'top right', 'top left', 'bottom right', 'bottom left' |
Use v-model directive to switch toast state
Example
<template>
<vue-toast-me
v-model="isToastShown"
type="notification"
animation-type="to-left"
position="bottom right"
:text="myText"
:timer="timeout"
:closeButton="true"
></vue-toast-me>
</template>
<script>
...
data() {
return {
isToastShown: false,
myText: 'Lorem ipsum dolor sit amet',
timeout: 5000,
}
}
...
</script>Enjoy!