https://github.com/kramer99/vue-knob-control
A rotary knob control for Vue.js
https://github.com/kramer99/vue-knob-control
control knob vue vuejs vuejs2
Last synced: 7 months ago
JSON representation
A rotary knob control for Vue.js
- Host: GitHub
- URL: https://github.com/kramer99/vue-knob-control
- Owner: kramer99
- License: mit
- Created: 2018-05-08T05:15:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-23T03:22:41.000Z (over 3 years ago)
- Last Synced: 2024-04-24T20:03:28.764Z (over 1 year ago)
- Topics: control, knob, vue, vuejs, vuejs2
- Language: Vue
- Size: 184 KB
- Stars: 54
- Watchers: 4
- Forks: 15
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - Vue旋钮控制 - Vue.js的旋钮控制 (UI组件 / 形成)
- awesome-vue - vue-knob-control - A rotary knob control for Vue.js ` 📝 2 years ago` (UI Components [🔝](#readme))
- awesome-vue - vue-knob-control - A rotary knob control for Vue.js (Components & Libraries / UI Components)
- awesome-vue - vue-knob-control ★18 - A rotary knob control for Vue.js (UI Components / Form)
- awesome-vue - vue-knob-control - A rotary knob control for Vue.js (UI Components / Form)
README
# vue-knob-control
A rotary knob control for Vue.js
## Install
```shell
npm install vue-knob-control -S
```
## Usage
```javascript
import Vue from 'vue'
import KnobControl from 'vue-knob-control'
Vue.use(KnobControl)
```
## Examples
Most basic usage:
```html
```
Specifying minimum and maximum values, note that the value arc is drawn from the calculated zero point. We have also made the arc appear thinner:
```html
```
Changing size and colors:
```html
```
You can also pass a function to alter the value text displayed:
```javascript
toWord: function(val) {
const map = {
0: 'zero',
1: 'one',
2: 'two',
3: 'three',
4: 'four',
}
return map[val];
}
```
```html
```
## Responsive
> Set the component responsive.
> Size property is always available, be careful if size is more than 100, size is expressed in % in this mode
```html
```
## Animation:
> Disabled by default
`animated` true|false
This will disable/enable knob animation but not value one.
`animateValue` true|false
Same as `animation` expect for the value.
`animationDuration` integer, in milliseconds
set the duration of both animation.
`animationFunction` string
CSS animation function, all CSS animations are available (eg: linear, ease-in, ease-out, ...).
### Examples
> Only animate knob itself
```html
```
> Only animate knob value
```html
```
_`animated` and `animateValue` can be set at the same time_
> This animation use `CSS linear function` during 5 sec
```html
```
_`animationDuration` should be expressed in ms (you can use multiplication if you prefer eg: "5 * 1000")_
## Properties
The only required property is `value`.
Option | Type | Description | Default
-------|------|-------------|--------
value | Number | Use the `v-model` attribute to set the value of the control | none
max | Number | Maximum value of the control | 100
min | Number | Minimum value of the control | 0
stepSize | Number | Smallest increment the value can change by | 1
disabled | Boolean | Set to true to disable the knob | false
readOnly | Boolean | Set to true to disable interaction with the knob while showing its value | false
size | Number | Visual size of the control in `px` (or `%` if `responsive` is `true`) | 100
primaryColor | String | Color of the value arc | #409eff
secondaryColor | String | Color of the rest of the control | #dcdfe6
textColor | String | Color of the value text | #000000
strokeWidth | Number | Thickness of the arcs | 17
valueDisplayFunction | Function | Custom function to alter the display text | `(v) => v`
responsive | Boolean | Use `%` instead of `px` | false
animation | Object | Optional animation config object: `{ animated: false, animateValue: false, animationDuration: 2000 (in ms), animationFunction: 'ease-in-out' }` | null