vuejs-title

Title bubble directive for Vue
22,735 7
Install
npm install vuejs-title
Latest Version:1.0.16
Vue:2
License:MIT
Last Updated:Mar 12, 2022
Links: GitHub  ·  npm
Maintainer: fattihkoca

vuejs-title

Travis Build Version Downloads

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

License

MIT

Copyright (c) 2018 Fatih Koca

Related Packages

@mdit-vue/plugin-title

A markdown-it plugin to get markdown page title

1,813,201 221
vue-page-title

Vue.js html/page title manager

103,341 130
toast-me

Creates toast messages

15,511 4
@jnields/vue-helmet

A document head manager for Vue

6,456 18
vue3-leaderline

Draw a leader line in your web page. Export lib

4,337 9

Version History

Version Released License
1.0.16 MIT
1.0.15 MIT
1.0.14 MIT
1.0.13 MIT
1.0.12 MIT