Vuejs-title: Title bubble directive for Vue.js

vuejs-title

Title bubble directive for Vue.js

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

GitHub

https://github.com/fattihkoca/vuejs-title