Skip to content

shwilliam/vue-responsive-text

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-responsive-text

scaling text example

Vue component that scales its child node in relation to its parent node's width

vue-responsive-text demo

Installation

Install the package from npm by running

$ npm i --save vue-responsive-text

or

$ yarn add vue-responsive-text

Usage

Import the component as you would any other and place responsive text as the component's child.

<template>
  <VueResponsiveText>
    this text will scale
  </VueResponsiveText>
</template>

<script>
import VueResponsiveText from 'vue-responsive-text'

export default {
  ...
  components: {
    VueResponsiveText
  }
};
</script>

Props

Prop Type Required Default Description
transition number false 0 Transition duration in ms

Inspiration

This component was inspired by @foisonocean's 'react-dynamic-font'.

Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:

  1. Fork the project
  2. Create your feature branch (git checkout -b new-feature-branch)
  3. Commit your changes (git commit -am 'add new feature')
  4. Push to the branch (git push origin new-feature-branch)
  5. Submit a pull request!

About

↔ Vue component that scales its child node in relation to its parent node's width

Topics

Resources

License

Stars

Watchers

Forks