Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/vue-notification below:

vue-notification - npm

Demo: http://vue-notification.yev.io/

npm install --save vue-notification

In main.js:

import Vue           from 'vue'
import Notifications from 'vue-notification'
 
 
Vue.use(Notifications)

In App.vue:

<notifications group="foo" />

In any of your vue files:

this.$notify({
  group: 'foo',
  title: 'Important message',
  text: 'Hello user! This is a notification!'
});

Anywhere else:

import Vue from 'vue'
 
Vue.notify({
  group: 'foo',
  title: 'Important message',
  text: 'Hello user! This is a notification!'
})

All configurations are optional.

All props are optional.

$ = {enter: {opacity: [1, 0]}, leave: {opacity: [0, 1]}}

  this.$notify({
    
    
    group: 'foo',
 
    
    
    type: 'warn',
 
    
    
    title: 'This is title',
 
    
    text: 'This is <b> content </b>',
 
    
    
    duration: 10000,
 
    
    
    speed: 1000
 
    
    
    data: {}
  })

Title and Text can be HTML strings.

Also you can use simplified version:

If you are planning to use notification component for 2 or more completely different types of notifications (for example, authentication error messages in top center and generic app notifications in bottom-right corner) - you can specify group property which is essentially a name of notification holder.

Example:

<notifications group="auth"/>
<notifications group="app"/>

this.$notify({ group: 'auth', text: 'Wrong password, please try again later' })

Position property requires a string with 2 keywords for vertical and horizontal postion.

Format: "<vertical> <horizontal>".

• Horizontal options: left, center, right
• Vertical options: top, bottom

Default is "top right".

Example:

<notifications position="top left"/>

You can write your own css styles for notifications:

Structure:

 
.my-style {
 
  .notification-title {
  }
 
  .notification-content {
  }
 
  &.my-type {
  }
}

To apply this style you will have to specify "classes" property:

  <notifications classes="my-style"/>

Default:

.vue-notification {
  padding: 10px;
  margin: 0 5px 5px;
 
  font-size: 12px;
 
  color: #ffffff;
  background: #44A4FC;
  border-left: 5px solid #187FE7;
 
  &.warn {
    background: #ffb648;
    border-left-color: #f48a06;
  }
 
  &.error {
    background: #E54D42;
    border-left-color: #B82E24;
  }
 
  &.success {
    background: #68CD86;
    border-left-color: #42A85F;
  }
}

Optional scope slot named "body" is supported.

Scope props:

Example:

<notifications group="custom-template"  
               position="bottom right">
   <template slot="body" slot-scope="props">
    <div>
        <a class="title">
          {{props.item.title}}
        </a>
        <a class="close" @click="props.close">
          <i class="fa fa-fw fa-close"></i>
        </a>
        <div v-html="props.item.text">
        </div>
    </div>
  </template>
</notifications>

Width can be set using a string with a percent or pixel extension (if simple number is not enough).

Examples: '100%', '50px', '50', 50

Plugin can use use Velocity library to make js-powered animations. To start using it you will have to manually install velocity-animate & supply the librarty to vue-notification plugin (reason for doing that is to reduce the size of this plugin).

In your main.js:

import Vue           from 'vue'
import Notifications from 'vue-notification'
import velocity      from 'velocity-animate'
 
Vue.use(Notifications, { velocity })

In the template you will have to set animation-type="velocity".

<notifications animation-type="velocity"/>

The animation configuration consists of 2 objects/functions: enter and leave.

Example:

animation = {
  enter (element) {
     
     let height = element.clientHeight
 
     return {
       
       height: [height, 0],
 
       
       opacity: [Math.random() * 0.5 + 0.5, 0]
     }  
  },
  leave: {
    height: 0,
    opacity: 0
  }
}

<notifications
  animation-type="velocity"
  animation="animation"/>

To remove all notifications, use clean: true parameter.

this.$notify({
  group: 'foo',
  clean: true
})

Check closed issues with FAQ label to get answers for most asked questions.

To run an example:
 
 
cd vue-notification
npm install
npm run build
 
 
cd demo
npm install
npm run dev
 
npm run test
 
npm run unit:watch

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