{"id":19728626,"url":"https://github.com/kramer99/vue-knob-control","last_synced_at":"2025-04-30T01:30:54.942Z","repository":{"id":32405140,"uuid":"132557262","full_name":"kramer99/vue-knob-control","owner":"kramer99","description":"A rotary knob control for Vue.js","archived":false,"fork":false,"pushed_at":"2022-03-23T03:22:41.000Z","size":188,"stargazers_count":54,"open_issues_count":1,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-24T20:03:28.764Z","etag":null,"topics":["control","knob","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kramer99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-08T05:15:14.000Z","updated_at":"2023-11-03T13:18:32.000Z","dependencies_parsed_at":"2022-08-07T17:16:03.456Z","dependency_job_id":null,"html_url":"https://github.com/kramer99/vue-knob-control","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kramer99%2Fvue-knob-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kramer99%2Fvue-knob-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kramer99%2Fvue-knob-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kramer99%2Fvue-knob-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kramer99","download_url":"https://codeload.github.com/kramer99/vue-knob-control/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224193132,"owners_count":17271238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["control","knob","vue","vuejs","vuejs2"],"created_at":"2024-11-12T00:06:06.542Z","updated_at":"2024-11-12T00:06:07.206Z","avatar_url":"https://github.com/kramer99.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","UI组件","Components \u0026 Libraries","UI Components"],"sub_categories":["形成","UI Components","Form"],"readme":"# vue-knob-control\nA rotary knob control for Vue.js\n\n## Install\n```shell\nnpm install vue-knob-control -S\n```\n\n## Usage\n\n```javascript\nimport Vue from 'vue'\nimport KnobControl from 'vue-knob-control'\n\nVue.use(KnobControl)\n```\n\n## Examples\n\nMost basic usage:\n```html\n\u003cknob-control v-model=\"someValue\"\u003e\u003c/knob-control\u003e\n```\n\u003cimg width=\"105\" alt=\"one\" src=\"https://user-images.githubusercontent.com/6402557/39788944-c86fd9f2-52e1-11e8-91f1-cb89cec6bf77.png\"\u003e\n\nSpecifying minimum and maximum values, note that the value arc is drawn from the calculated zero point. We have also made the arc appear thinner:\n```html\n\u003cknob-control\n  :min=\"-12\"\n  :max=\"12\"\n  :stroke-width=\"8\"\n  v-model=\"semitone\"\n\u003e\u003c/knob-control\u003e\n```\n\u003cimg width=\"95\" alt=\"two\" src=\"https://user-images.githubusercontent.com/6402557/39788946-c8b784d2-52e1-11e8-9922-841bb6331d48.png\"\u003e\n\nChanging size and colors:\n```html\n\u003cknob-control\n  :min=\"-64\"\n  :max=\"63\"\n  :size=\"75\"\n  primary-color=\"#E844C3\"\n  secondary-color=\"#E7B6DC\"\n  text-color=\"#E844C3\"\n  v-model=\"detune\"\n\u003e\u003c/knob-control\u003e\n```\n\u003cimg width=\"80\" alt=\"three\" src=\"https://user-images.githubusercontent.com/6402557/39788945-c88ae45e-52e1-11e8-98ec-f73600cc505d.png\"\u003e\n\nYou can also pass a function to alter the value text displayed:\n```javascript\ntoWord: function(val) {\n    const map = {\n        0: 'zero',\n        1: 'one',\n        2: 'two',\n        3: 'three',\n        4: 'four',\n    }\n    return map[val];\n}\n```\n\n```html\n\u003cknob-control\n  :min=\"0\"\n  :max=\"4\"\n  :value-display-function=\"toWord\"\n  v-model=\"val\"\n\u003e\u003c/knob-control\u003e\n```\n\u003cimg width=\"107\" alt=\"four\" src=\"https://user-images.githubusercontent.com/6402557/39789354-331a636a-52e4-11e8-9464-6627b3e11add.png\"\u003e\n\n## Responsive\n\n\u003e Set the component responsive.\n\n\u003e Size property is always available, be careful if size is more than 100, size is expressed in % in this mode \n```html\n\u003cknob-control\n    :responsive=\"true\"\n\u003e\u003c/knob-control\u003e\n```\n\n## Animation:\n\u003e Disabled by default\n\n`animated` true|false \u003cbr\u003e\nThis will disable/enable knob animation but not value one. \u003cbr\u003e\n\n`animateValue` true|false \u003cbr\u003e\nSame as `animation` expect for the value. \u003cbr\u003e\n\n`animationDuration` integer, in milliseconds \u003cbr\u003e\nset the duration of both animation. \u003cbr\u003e\n\n`animationFunction` string \u003cbr\u003e\nCSS animation function, all CSS animations are available (eg: linear, ease-in, ease-out, ...). \u003cbr\u003e\n\n### Examples\n\n\u003e Only animate knob itself\n```html\n\u003cknob-control\n    :animation=\"{\n        animated: true\n    }\"\n\u003e\u003c/knob-control\u003e\n```\n\u003e Only animate knob value \n```html\n\u003cknob-control\n    :animation=\"{\n        animateValue: true\n    }\"\n\u003e\u003c/knob-control\u003e\n```\n_`animated` and `animateValue` can be set at the same time_\n\n\u003e This animation use `CSS linear function` during 5 sec\n```html\n\u003cknob-control\n    :animation=\"{\n        animated: true,\n        animateValue: true,\n        animationDuration: '5000',\n        animationFunction: 'linear'\n    }\"\n\u003e\u003c/knob-control\u003e\n```\n_`animationDuration` should be expressed in ms (you can use multiplication if you prefer eg: \"5 * 1000\")_\n\n## Properties\n\nThe only required property is `value`.\n\nOption | Type | Description | Default\n-------|------|-------------|--------\nvalue | Number | Use the `v-model` attribute to set the value of the control | none\nmax | Number | Maximum value of the control | 100\nmin | Number | Minimum value of the control | 0\nstepSize | Number | Smallest increment the value can change by | 1\ndisabled | Boolean | Set to true to disable the knob | false\nreadOnly | Boolean | Set to true to disable interaction with the knob while showing its value | false\nsize | Number | Visual size of the control in `px` (or `%` if `responsive` is `true`) | 100\nprimaryColor | String | Color of the value arc | #409eff\nsecondaryColor | String | Color of the rest of the control | #dcdfe6\ntextColor | String | Color of the value text | #000000\nstrokeWidth | Number | Thickness of the arcs | 17\nvalueDisplayFunction | Function | Custom function to alter the display text | `(v) =\u003e v`\nresponsive | Boolean | Use `%` instead of `px` | false\nanimation | Object | Optional animation config object: `{ animated: false, animateValue: false, animationDuration: 2000 (in ms), animationFunction: 'ease-in-out' }` | null\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkramer99%2Fvue-knob-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkramer99%2Fvue-knob-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkramer99%2Fvue-knob-control/lists"}