Skip to content

noru/vue-easy-toast

Repository files navigation

Vue-Easy-Toast

Vue 1.x Vue 2.x

A toast plugin for vue/vue2.

DEMO

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.

Usage

install

npm install vue-easy-toast --save

Quickstart

// 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>')

More

toast or $toast takes 2 parameter: (message, [options])

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 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
Styling

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.

example
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'
})
TODO
  • font-awesome? emoji?

License

MIT