Miss any of our Open RFC calls?Watch the recordings here! »

vuejs-snackbar

4.0.1 • Public • Published

vuejs-snackbar

NPM Version Download Month gzip with dependencies: 1.3kb pkg.module

pkg.module supported, which means that you can apply tree-shaking in you project

A Vuejs snackbar component, supported SSR, compatible with IE

Repository: https://github.com/livelybone/vuejs-snackbar.git

You can rewrite all style by set prop wrapClass. the css file content maybe like:

  .[wrapClass] {
    ...
    
    .snack-bar {
      ...
    }
  }

Demo

https://livelybone.github.io/vue/vuejs-snackbar/

Installation

npm install vuejs-snackbar --save-dev

Register the component

import Snackbar from 'vuejs-snackbar';
 
// Global register
Vue.component('snackbar', Snackbar);
 
// Local register
new Vue({
  components:{Snackbar}
})
 

Apply

// template
<template>
    <snackbar ref="snackbar" baseSize="100px" :wrapClass="''" :colors="null" :holdTime="3000" :multiple="true"/>
</template>
// component
export default{
  name:'AnyComponent',
  mounted(){
    this.$refs.snackbar.info('msg');
    this.$refs.snackbar.error('msg');
    this.$refs.snackbar.warn('msg');
    this.$refs.snackbar.open('msg');
  },
  components:{Snackbar}  // Local register
}

Props

Name Type DefaultValue Description
baseSize String 100px Used to set size of snackbar. Tested by reg: /\d(rem|px|em)$/
wrapClass String none Used to set the wrap class of snackbar. When it Used, the prop 'baseSize' will be ignored, and you must rewrite all the style of snackbar
colors Object {open: '#333',info: '#3DBD7D',error: '#FA7377',warn: '#FF6600'} Used to set the background color of snackbar with different type
holdTime Number 3000 Used to set hold time of snackbar
multiple Boolean true Used to set if it show multiple snackbar or not
position String top-center Used to set the position of the wrap

method

Name Parameter
open msg --> [String, Object]. when it is an Object, it must be an Object with property toStringFunction], or with property messageString.
info msg
warn msg
error msg

Install

npm i vuejs-snackbar

DownloadsWeekly Downloads

191

Version

4.0.1

License

MIT

Unpacked Size

20.6 kB

Total Files

6

Last publish

Collaborators

  • avatar