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

Message component for Vue Bulma
https://github.com/vue-bulma/message

Last synced: about 2 months ago
JSON representation

Message component for Vue Bulma

• Host: GitHub
• URL: https://github.com/vue-bulma/message
• Owner: vue-bulma
• License: mit
• Created: 2016-07-14T15:48:33.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-29T00:31:43.000Z (about 7 years ago)
• Last Synced: 2024-10-28T15:59:34.224Z (about 2 months ago)
• Language: Vue
• Size: 9.77 KB
• Stars: 7
• Watchers: 1
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Message

Message component for Vue Bulma.

## Installation

```

$ npm install vue-bulma-message --save

```

## Examples

```vue

  


    

    Normal

    Primary

    Info

    Success

    Warning

    Danger

  


import Vue from 'vue'

import Message from 'vue-bulma-message'

const MessageComponent = Vue.extend(Message)

const openMessage = (propsData = {

  title: '',

  message: '',

  type: '',

  direction: '',

  duration: 1500,

  container: '.messages'

}) => {

  return new MessageComponent({

    el: document.createElement('div'),

    propsData

  })

}

export default {

  components: {

    Message

  },

  mounted () {

    openMessage({

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

      type: 'success',

      duration: 0,

      showCloseButton: true

    })

  },

  methods: {

    openMessageWithType (type) {

      openMessage({

        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)