- Notifications
You must be signed in to change notification settings - Fork30
A Toast widget for Vue 1 & 2
License
NotificationsYou must be signed in to change notification settings
noru/vue-easy-toast
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A toast plugin for vue/vue2.
Note:Since 1.x.x, only Vue 2 is supported. For Vue 1 users please stick to version 0.x.x
Issue/PR is welcomed, I'll response as soon as possible.
npm install vue-easy-toast --save
// before startimportToastfrom'vue-easy-toast'// or a lite version without inline css, then you have to style yourself or manually import 'vue-easy-toast.css'importToastfrom'vue-easy-toast/dist/vue-easy-toast-lite.min.js'require('vue-easy-toast/dist/vue-easy-toast.css')// optionalVue.use(Toast)// in your codeVue.toast('Can I have everybody`s attention?')// or$vm.$toast('Let me give a toast to you all.')// or with HTML Tags$vm.$toast('Hi <strong>Jonh</strong>')
toast or$toast takes 2 parameter:(message, [options])
| Parameter | Type | Default | Description |
|---|---|---|---|
| id | string | easy-toast-default | Unique identifier globally. Use this to create multiple toasts with different setups. |
| parent | string | body | Selector of the container (TODO, not ready yet, position is fixed to the window) |
| className | string,array | Self-defined class names to pass through. There are 3 pre-defined classes:et-info,et-warn,et-alert, to toast with different background color | |
| horizontalPosition | string | right | Position horizontal of toast. There are 3 pre-defined positions:left,right andcenter |
| verticalPosition | string | top | Position vertical of toast. There are 2 pre-defined positions:top andbottom |
| duration | number | 5000 | The duration one toast will last, in milliseconds |
| mode | string | override | override orqueue. Ifoverride, the last toast will forcibly flush previous |
| closeable | boolean | false | true orfalse. Iftrue, the toast can be closed manually |
| transition | string | fade | Built-in transitions:fade,slide-[up/down/left/right]. See alsoTransitions |
Besides minimum styling,vue-easy-toast try not to be opinionated about the appearance. It is a simply adiv(class="et-wrapper") wrapped aspan(class="et-content"). Apply your css freely with them or with your own classes passed in asclassName.
Vue.toast('Hi, there!',{id:'my-toast',parent:'#toast-container',className:['my-toast','toast-warning'],horizontalPosition:'right',verticalPosition:'top',duration:3000,mode:'queue',transition:'my-transition'})
- font-awesome? emoji?
MIT
About
A Toast widget for Vue 1 & 2
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors8
Uh oh!
There was an error while loading.Please reload this page.