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 [email protected]: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
