https://github.com/jayeshlab/vue-resize-text

A vue directive which automatically resize font size based on element width.
https://github.com/jayeshlab/vue-resize-text

fittext font rescale resize responsive text vue vuejs

Last synced: 3 days ago
JSON representation

A vue directive which automatically resize font size based on element width.

• Host: GitHub
• URL: https://github.com/jayeshlab/vue-resize-text
• Owner: JayeshLab
• License: mit
• Created: 2018-11-12T12:01:13.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-11-17T03:44:55.000Z (almost 2 years ago)
• Last Synced: 2024-04-24T08:16:01.871Z (7 months ago)
• Topics: fittext, font, rescale, resize, responsive, text, vue, vuejs
• Language: JavaScript
• Homepage: https://jayeshlab.github.io/vue-resize-text/index.html
• Size: 291 KB
• Stars: 70
• Watchers: 3
• Forks: 7
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Resize Text

A vue directive which automatically resize font size based on element width.

It makes the font-size flexible on fluid or responsive layout.

[![npm](https://img.shields.io/npm/v/vue-resize-text.svg?style=flat-square)](https://www.npmjs.com/package/vue-resize-text)

[![npm](https://img.shields.io/npm/dt/vue-resize-text.svg?style=flat-square)](https://www.npmjs.com/package/vue-resize-text)

[![Build Status](https://travis-ci.org/JayeshLab/vue-resize-text.svg?branch=master)](https://travis-ci.org/JayeshLab/vue-resize-text)

[![npm](https://img.shields.io/npm/l/vue-resize-text.svg?style=flat-square)](http://opensource.org/licenses/MIT)

[Live Demo](https://jayeshlab.github.io/vue-resize-text/index.html): Resize the browser viewport to see the effect in action

For Vue.js 3.x see the [vue3-resize-text](https://github.com/JayeshLab/vue3-resize-text "vue3-resize-text")

![vue-resize-text](https://user-images.githubusercontent.com/36194663/48419503-21935780-e77e-11e8-8a2f-6a1c9e33f740.gif)

## Installation

Install via NPM

`$ npm install vue-resize-text --save`

Install via CDN

```html

```

#### Global

Register VueResizeText globally:

```javascript

import Vue from 'Vue';

import VueResizeText from 'vue-resize-text';

Vue.use(VueResizeText)

```

Directive ```v-resize-text``` then can be used in any of Component

```html

  
Hello Vue


```

#### Local

Include the VueResizeText  directive directly into your component using import:

```html

  
Hello Vue


import ResizeText from 'vue-resize-text'

export default {

 directives: {

    ResizeText

 }

}

```

### Usage

#### Basic usage

```html

  


    
Hello Vue

  


  import ResizeText from 'vue-resize-text'

  export default {

    directives: {

        ResizeText

     }

  };

```

### Directive Arguments

`v-resize-text="{ratio:1.5, minFontSize: '30px', maxFontSize: '100px', delay: 200}"`

| Argument         | Description                 |  Type         |  Default     | 

| -----------      | ---------------             | ------------  | ------------ | 

|  ratio           |  Font Ratio is the tweek to make the text resize properly, greater then `1` makes the font smaller and less then `1` make the font bigger | Number        |     1       |

|  minFontSize     |  Minimum font-size threshold in px| Number/String |     16px or 16       |      -            |

|  maxFontSize     |  Maximum font-size threshold in px| Number/String  |     500px  or 500      |      -         |

|  delay           |  Debound time delay on window resize | Number        |  200   |      -        |

## License

MIT