crip-vue-notice

A Vue.js project to add global notices on a page.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
crip-vue-notice
1111.1.15 years ago5 years agoMinified + gzip package size for crip-vue-notice in KB

Readme

crip-vue-notice
A Vue.js project to add global notices on a page. Take a look to demo page Preview

Usage

Install

```bash
npm i -S crip-vue-notice
```

Prerequisites

  • Font Awesome: Add font awesome css to make ikons in notices visible:
```html
...
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

Setup

```javascript import Vue from 'vue' import CripNotice from 'crip-vue-notice' // Install component in to Vue instance. Vue.use(CripNotice) ```

Display notification

```vue // App.vue
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2">
<button class="btn btn-default" @click="notice('open')">Normal</button>
<button class="btn btn-default" @click="notice('error')">Error</button>
<button class="btn btn-default" @click="notice('info')">Info</button>
<button class="btn btn-default" @click="notice('success')">Success</button>
<button class="btn btn-default" @click="notice('warning')">Warning</button>
</div>
</div>
```

Build Setup

```bash
install dependencies and serve with hot reload at localhost:8080
npm i && npm run dev
```

Release steps

```bash
npm run release
```