vc-toptip
npm i vc-toptip

vc-toptip

a toptip Vue component

by vue-component

0.1.0 (see all)License:MITTypeScript:Not Found
npm i vc-toptip
Readme

vc-toptip

NPM version NPM download

A simple toptip Vue (v1.0.0+) component

Demo

http://vue-component.github.io/vc-toptip/test/

Install

$ npm install vc-toptip

or use dist/vc-toptip.dist.js directly.

Usage

Example

Vue.use(require('vc-toptip'))
require('vc-toptip/src/vc-toptip.scss') // or link the stylesheet manually if you are not using webpack

You can use <vc-toptip></vc-toptip> now in your view.

Then show a tip:

vm.$broadcast('showTip', {
  status: 'error',
  content: 'something wrong happend',
  duration: 3000 // optional, default is 2000
})

Custom

You can custom the style of toptip, only need to write an overwritten style:

#vc-toptip{
  padding-left: 1em;
  padding-right: 1em;
  &.error{
    border-bottom: 1px solid #ebccd1;
    color: #a94442;
    background-color: #f2dede;
  }

  &.warning{
    border-bottom: 1px solid #faebcc;
    color: #8a6d3b;
    background-color: #fcf8e3;
  }

  &.success{
    border-bottom: 1px solid #d6e9c6;
    color: #3c763d;
    background-color: #dff0d8;
  }
}

One status corresponding one class,so you could extend the status style easily.

License

MIT License

Downloads/wk

3

GitHub Stars

17

LAST COMMIT

7yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.1.0
latest
7yrs ago
No alternatives found
No tutorials found
Add a tutorial