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 start
import Toast from 'vue-easy-toast'
// or a lite version without inline css, then you have to style yourself or manually import 'vue-easy-toast.css'
import Toast from 'vue-easy-toast/dist/vue-easy-toast-lite.min.js'
require('vue-easy-toast/dist/vue-easy-toast.css') // optional
Vue.use(Toast)
// in your code
Vue.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])
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 and center verticalPosition string top Position vertical of toast. There are 2 pre-defined positions: top and bottom duration number 5000 The duration one toast will last, in milliseconds mode string override override or queue. If override, the last toast will forcibly flush previous closeable boolean false true or false. If true, the toast can be closed manually transition string fade Built-in transitions: fade, slide-[up/down/left/right]. See also Transitions
Besides minimum styling, vue-easy-toast try not to be opinionated about the appearance. It is a simply a div(class="et-wrapper") wrapped a span(class="et-content"). Apply your css freely with them or with your own classes passed in as className.
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'
})
MIT
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4