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.
Live Demo: Resize the browser viewport to see the effect in action
Installation
Install via NPM
$ npm install vue-resize-text --save
Install via CDN
Global
Register VueResizeText globally:
;; Vue
Directive v-resize-text
then can be used in any of Component
Hello Vue
Local
Include the VueResizeText directive directly into your component using import:
Hello Vue
Usage
Basic usage
Hello Vue
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