https://github.com/vue-bulma/notification

Notification component for Vue Bulma
https://github.com/vue-bulma/notification

Last synced: 24 days ago
JSON representation

Notification component for Vue Bulma

• Host: GitHub
• URL: https://github.com/vue-bulma/notification
• Owner: vue-bulma
• License: mit
• Created: 2016-07-14T15:37:23.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-07-21T10:23:43.000Z (almost 6 years ago)
• Last Synced: 2024-05-21T05:46:32.143Z (about 1 month ago)
• Language: Vue
• Size: 10.7 KB
• Stars: 32
• Watchers: 3
• Forks: 19
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vuejs - vue-bulma-notification
• awesome-vue-refactor - vue-bulma-notification

README

        
# Notification

Notification component for Vue Bulma.

## Installation

```

$ npm install vue-bulma-notification --save

```

## Examples

```vue

  


    

    Normal

    Primary

    Info

    Success

    Warning

    Danger

  


import Vue from 'vue'

import Notification from 'vue-bulma-notification'

const NotificationComponent = Vue.extend(Notification)

const openNotification = (propsData = {

  title: '',

  message: '',

  type: '',

  direction: '',

  duration: 4500,

  container: '.notifications'

}) => {

  return new NotificationComponent({

    el: document.createElement('div'),

    propsData

  })

}

export default {

  components: {

    Notification

  },

  mounted () {

    openNotification({

      message: 'Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit',

      type: 'success',

      duration: 0

    })

  },

  methods: {

    openNotificationWithType (type) {

      openNotification({

        title: 'This is a title',

        message: 'This is the message.',

        type: type

      })

    }

  }

}

```

## Badges

![](https://img.shields.io/badge/license-MIT-blue.svg)

![](https://img.shields.io/badge/status-stable-green.svg)

---

> [fundon.me](https://fundon.me)  · 

> GitHub [@fundon](https://github.com/fundon)  · 

> Twitter [@_fundon](https://twitter.com/_fundon)