Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fattihkoca/vuejs-title
Title bubble directive for Vue.js
https://github.com/fattihkoca/vuejs-title
vue vuejs vuejs-directive vuejs-title vuejs-title-bubble vuejs2
Last synced: about 1 month ago
JSON representation
Title bubble directive for Vue.js
- Host: GitHub
- URL: https://github.com/fattihkoca/vuejs-title
- Owner: fattihkoca
- License: mit
- Created: 2018-04-06T18:07:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-12T11:13:47.000Z (over 2 years ago)
- Last Synced: 2024-10-07T12:49:18.503Z (about 1 month ago)
- Topics: vue, vuejs, vuejs-directive, vuejs-title, vuejs-title-bubble, vuejs2
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuejs-title
[](https://travis-ci.org/fattihkoca/vuejs-title)
[](https://www.npmjs.com/package/vuejs-title)
[](https://www.npmjs.com/package/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
```js
// ES6
import vTitle from 'vuejs-title'
Vue.use(vTitle)
// ES5
var vTitle = require('vuejs-title')
Vue.use(vTitle)
```
### Example
```html
[1]
[2]
[3]
[4]
```
# 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
```js
// 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](LICENSE)
Copyright (c) 2018 [Fatih Koca](http://fattih.com)