Vue JavaScript HTML
Switch branches/tags
Nothing to show
Latest commit bee5802 Nov 12, 2017 @LucasLeandro1204 LucasLeandro1204 0.2.1
Permalink
Failed to load latest commit information.
dist dist Nov 12, 2017
src fixed safari issue & add round prop Nov 12, 2017
static finished? Nov 11, 2017
.babelrc build Nov 11, 2017
.gitignore build Nov 11, 2017
LICENSE Initial commit Nov 8, 2017
README.md fixed safari issue & add round prop Nov 12, 2017
index.html fixed safari issue & add round prop Nov 12, 2017
package-lock.json 0.2.1 Nov 12, 2017
package.json 0.2.1 Nov 12, 2017
webpack.config.js first Nov 11, 2017

README.md

Vue Twitter Counter

Counter component inspired in Twitter with Vue

You can see examples in here

Getting started

Install

Simple install it via npm (or yarn if you want to)

$ npm install vue-twitter-counter --save

Usage

It's super easy to use it =)

  <textarea v-model="message"></textarea>
  <vue-twitter-counter :current-length="message.length"></vue-twitter-counter>

It's super easy to use it =) The only thing you HAVE to do is pass the current-length prop.

Props list

Prop Type Default Description
warnLength Number 20 The min rest to show the warns
dangerAt Number 280 The length to be in danger
currentLength Number REQUIRED The current length of whatever you want to
underlay String #ccd6dd Underlay counter color
safe String #1da1f2 Safe color
warn String #ffad1f Warn color
danger String #e0245e Danger color
round Boolean false Round progress circle edges
animate Boolean false Animate the progress circle
speed Number 150 The animation speed in ms

Color props are required to be HEX with hash prefix, they are validate =)

Development

If you want to help this project, first of all clone it

$ git clone git@github.com:LucasLeandro1204/vue-twitter-counter.git

To run for development run

$ npm run dev

This will host the application at localhost:8080

To build for production run

$ npm run build

The above command bundle the app and also features minification to help reduce file size

License

MIT