- Notifications
You must be signed in to change notification settings - Fork2
Counter component inspired in Twitter with Vue
License
LucasLeandro1204/vue-twitter-counter
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Counter component inspired in Twitter with Vue
You can see examples inhere
Simple install it via npm (or yarn if you want to)
$ npm install vue-twitter-counter --save
It's super easy to use it =)
<textareav-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 thecurrent-length prop.
| 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 =)
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
MIT
About
Counter component inspired in Twitter with Vue
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.