Skip to content

Kashio/vue-toast

Repository files navigation

Vue.js toast plugin

NPM

Build status Coverage Status Dependency Status devDependency Status

Basic usage

import Vue from 'vue';

import { VueToast } from '@kashio/vue-toast';
import '@kashio/vue-toast/dist/index.css';

Vue.use(VueToast);

Vue.maxToasts = 10;

const vm = new Vue({
  el: '#app',
  render: h => h('button', {
    style: {
      position: 'relative',
      top: '20px',
      left: '20px'
    },
    on: {
      click() {
        vm.$toast({
          message: 'Hello World',
          borderRadius: 7,
          color: 'black',
          backgroundColor: '#e2eef9',
          fixedWidth: 300,
          closeButton: true,
          time: 5000
        });
      }
    }
  }, 'Launch Toast')
});

export default vm;

Table of contents


Options

Values

  • fade - Fade speed (Number | String). Defaults to slow (see jQuery fade values).
  • position - Toast position (String). Either bottom left, bottom right, top left, or top right. Defaults to bottom right.
  • borderRadius - Toast border radius (Number | String). Defaults to 0.
  • message - Toast message (string).
  • color - Toast message color (string). Defaults to rgb(255, 255, 255).
  • backgroundColor - Toast background color (string). Defaults to rgba(60, 118, 61, 0.9).
  • closeButton - Show close button (Boolean). Takes priority over time.
  • time - Time in milliseconds before toast disappears (Number). Defaults to 3000.
  • fixedWidth - Width of the toast (Number | String).

Tests

Run tests with
$ npm test

License

vue-toast is licensed under the GPL V3 License.