https://github.com/JayeshLab/vue3-resize-text

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

directive vue vue3

Last synced: 5 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/JayeshLab/vue3-resize-text
• Owner: JayeshLab
• License: mit
• Created: 2021-07-22T07:39:20.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-07-24T05:44:17.000Z (over 4 years ago)
• Last Synced: 2024-03-14T16:04:45.703Z (almost 2 years ago)
• Topics: directive, vue, vue3
• Language: JavaScript
• Homepage: https://jayeshlab.github.io/vue3-resize-text/index.html
• Size: 95.7 KB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Vue3 Resize Text

A vue3 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/vue3-resize-text.svg?style=flat-square)](https://www.npmjs.com/package/vue3-resize-text)

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

[![Build Status](https://www.travis-ci.com/JayeshLab/vue3-resize-text.svg?branch=master&status=passed)](https://travis-ci.org/JayeshLab/vue3-resize-text)

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

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

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

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

## Installation

Install via NPM

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

Install via CDN

```html

```

#### Global

Register VueResizeText globally:

### Use

```javascript

import { createApp } from "vue"

import App from "./App.vue"

import VueResizeText from "vue3-resize-text"

const app = createApp(App)

app.use(VueResizeText)

```

or using directive

```javascript

import { createApp } from "vue"

import App from "./App.vue"

import VueResizeText from "vue3-resize-text"

const app = createApp(App)

app.directive('ResizeText', VueResizeText.ResizeText);

```

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 VueResizeText from 'vue3-resize-text'

export default {

 directives: {

    ResizeText: VueResizeText.ResizeText

 }

}

```

### Usage

#### Basic usage

```html

  


    
Hello Vue

  


  import VueResizeText from 'vue3-resize-text'

  export default {

    directives: {

        ResizeText: VueResizeText.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