Vuejs-title NPM

vuejs-title

Vuejs Title

What?

It is a title bubble directive for Vue.js that you can easily use in your projects.
The most important features are stylish, simple, lightweight, convertible.

Install

npm install vuejs-title --save

Usage

// ES6
import vTitle from 'vuejs-title'
Vue.use(vTitle)

// ES5
var vTitle = require('vuejs-title')
Vue.use(vTitle)

Example

[1] <div title="Somethings..." v-title></div>

[2] <div v-title="'Somethings...'"></div>

[3] <div v-title="data"></div>

[4] <div :title="data" v-title></div>

Configurations

You can convert as you like with the settings. To do this, we will make a change in the "Usage" section for the "vuejs-title" you added to your project.

Example Usage

// ES6
import vTitle from 'vuejs-title'
Vue.use(vTitle, {
    cssClass: "my-title-bubble",
    fontSize: "20px"
})

// ES5
var vTitle = require('vuejs-title')
Vue.use(vTitle, {
    cssClass: "my-title-bubble",
    fontSize: "20px"
})

You can change the configurations in the following table according to the figure above:

Configuration	Type	Default	Description
bgColor	String	rgba(0,0,0,0.7)	Color background of the title bubble
cssClass	String	v-title	The css class name of the title bubble.
fontSize	String	14px	Font size of the title bubble
maxHeight	String	50px	Max height of the title balloon
maxWidth	String	250px	Max width of the title balloon
minPositionGap	Integer	20	Distance of the title balloon from window edges
padding	String	5px 10px	Inner space of the title balloon
round	String	4px	Rolling radius of the corners of the title bubble
textColor	String	#FFF	Font color of the title bubble
transitionDelay	Integer	200	Transition delay of the title bubble
transitionDuration	Integer	300	Transition duration of the title bubble