All Projects → shwilliam → vue-responsive-text

shwilliam / vue-responsive-text

Licence: MIT license
↔ Vue component that scales its child node in relation to its parent node's width

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects

Projects that are alternatives of or similar to vue-responsive-text

Fitty
✨ Makes text fit perfectly
Stars: ✭ 3,321 (+14339.13%)
Mutual labels:  resize, scale, responsive, text
vue-resize-text
A vue directive which automatically resize font size based on element width.
Stars: ✭ 65 (+182.61%)
Mutual labels:  resize, responsive, text
hotscript
HotScript - Revolutionizing how Windows works.
Stars: ✭ 29 (+26.09%)
Mutual labels:  resize, text
downscale
Better image downscale with canvas.
Stars: ✭ 80 (+247.83%)
Mutual labels:  resize, scale
pixcat
CLI and Python 3.6+ API to display images on a kitty terminal with optional resizing.
Stars: ✭ 21 (-8.7%)
Mutual labels:  resize, scale
flutter scale aware
🎗 Scale-based layouts with a bit more ease, powered by extensions.
Stars: ✭ 26 (+13.04%)
Mutual labels:  scale, responsive
Rumble
⛈️ Rumble 1.11.0 "Banyan Tree"🌳 for Apache Spark | Run queries on your large-scale, messy JSON-like data (JSON, text, CSV, Parquet, ROOT, AVRO, SVM...) | No install required (just a jar to download) | Declarative Machine Learning and more
Stars: ✭ 58 (+152.17%)
Mutual labels:  scale, text
Lipo
👄 Free image manipulation API service built on top of Sharp (an alternative to Jimp, Graphics Magic, Image Magick, and PhantomJS)
Stars: ✭ 101 (+339.13%)
Mutual labels:  resize, scale
Sketch Textbox Fit Content
Set the height of a selected text layer or all text layers in a selected group to it's content's height.
Stars: ✭ 49 (+113.04%)
Mutual labels:  resize, text
Php Image Resize
PHP library to resize, scale and crop images. Cloud solution available at:
Stars: ✭ 955 (+4052.17%)
Mutual labels:  resize, scale
Image Map Resizer
Responsive HTML Image Maps
Stars: ✭ 661 (+2773.91%)
Mutual labels:  resize, responsive
scalem
A jQuery plugin to make any element scalable (responsive).
Stars: ✭ 33 (+43.48%)
Mutual labels:  scale, responsive
Gimage
A PHP library for easy image handling. 🖼
Stars: ✭ 148 (+543.48%)
Mutual labels:  resize, scale
multiple-windows
This project is a chrome extension. It provide to create windows to different sizes and multiple for front-end developers.
Stars: ✭ 16 (-30.43%)
Mutual labels:  resize, responsive
qt-quick-responsive-helper
A simple toolbar for QtQuick based applications, to let developers test different resolutions and dpi settings easily. It was made to be integrated with minimal effort (only one QML file), and to be configurable for your specific usage.
Stars: ✭ 26 (+13.04%)
Mutual labels:  responsive
scale.js
High-quality scale function for canvas and image element. If scale factor < 1, then algorithm for downscale (area average) is used, other than that, bicubic algorithm is used.
Stars: ✭ 45 (+95.65%)
Mutual labels:  scale
text-sdk-php
PHP SDK to send messages with CM.com
Stars: ✭ 18 (-21.74%)
Mutual labels:  text
serverless-scaleway-functions
Plugin for Serverless Framework to allow users to deploy their serverless applications on Scaleway Functions
Stars: ✭ 58 (+152.17%)
Mutual labels:  scale
text-editor
A text selection range API written in pure JavaScript, for modern browsers.
Stars: ✭ 24 (+4.35%)
Mutual labels:  text
cookie
Landing website + Blog using Jekyll & Tailwind CSS
Stars: ✭ 61 (+165.22%)
Mutual labels:  responsive

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!
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].