Fixed #693 - Knob Component
Cagatay Civici
parent
7907a3ede1
commit
3783b9ce41
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './components/knob/Knob';
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
'use strict';
|
||||||
|
module.exports = require('./components/knob/Knob.vue');
|
||||||
|
|
@ -55,6 +55,7 @@
|
||||||
<router-link to="/inputswitch">InputSwitch</router-link>
|
<router-link to="/inputswitch">InputSwitch</router-link>
|
||||||
<router-link to="/inputtext">InputText</router-link>
|
<router-link to="/inputtext">InputText</router-link>
|
||||||
<router-link to="/floatlabel">FloatLabel</router-link>
|
<router-link to="/floatlabel">FloatLabel</router-link>
|
||||||
|
<router-link to="/knob">Knob <Tag value="New"></Tag></router-link>
|
||||||
<router-link to="/listbox">Listbox</router-link>
|
<router-link to="/listbox">Listbox</router-link>
|
||||||
<router-link to="/multiselect">MultiSelect</router-link>
|
<router-link to="/multiselect">MultiSelect</router-link>
|
||||||
<router-link to="/password">Password</router-link>
|
<router-link to="/password">Password</router-link>
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,7 @@
|
||||||
.p-disabled, .p-disabled * {
|
.p-disabled, .p-disabled * {
|
||||||
cursor: default !important;
|
cursor: default !important;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-component-overlay {
|
.p-component-overlay {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
declare class Knob extends Vue {
|
||||||
|
modelValue?: number;
|
||||||
|
size?: number;
|
||||||
|
disabled?: boolean;
|
||||||
|
readonly?: boolean;
|
||||||
|
step?: number;
|
||||||
|
min?: number;
|
||||||
|
max?: number;
|
||||||
|
valueColor?: string;
|
||||||
|
rangeColor?: string;
|
||||||
|
textColor?: string;
|
||||||
|
strokeWidth?: number;
|
||||||
|
showValue?: boolean;
|
||||||
|
valueTemplate?: string;
|
||||||
|
$emit(eventName: 'change', value: any): this;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Knob;
|
||||||
|
|
@ -0,0 +1,239 @@
|
||||||
|
<template>
|
||||||
|
<div :class="containerClass">
|
||||||
|
<svg viewBox="0 0 100 100" :width="size" :height="size" @click="onClick" @mousedown="onMouseDown" @mouseup="onMouseUp"
|
||||||
|
@touchstart="onTouchStart" @touchend="onTouchEnd">
|
||||||
|
<path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" class="p-knob-range"></path>
|
||||||
|
<path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" class="p-knob-value"></path>
|
||||||
|
<text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text">{{valueToDisplay}}</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
emits: ['update:modelValue', 'change'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
radius: 40,
|
||||||
|
midX: 50,
|
||||||
|
midY: 50,
|
||||||
|
minRadians: 4 * Math.PI / 3,
|
||||||
|
maxRadians: -Math.PI / 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: Number,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
step: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
valueColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'var(--primary-color, Black)'
|
||||||
|
},
|
||||||
|
rangeColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'var(--surface-d, LightGray)'
|
||||||
|
},
|
||||||
|
textColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'var(--text-color-secondary, Black)'
|
||||||
|
},
|
||||||
|
strokeWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 14
|
||||||
|
},
|
||||||
|
showValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
valueTemplate: {
|
||||||
|
type: String,
|
||||||
|
default: "{value}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue(offsetX, offsetY) {
|
||||||
|
let dx = offsetX - this.size / 2;
|
||||||
|
let dy = this.size / 2 - offsetY;
|
||||||
|
let angle = Math.atan2(dy, dx);
|
||||||
|
let start = -Math.PI / 2 - Math.PI / 6;
|
||||||
|
this.updateModel(angle, start);
|
||||||
|
},
|
||||||
|
updateModel(angle, start) {
|
||||||
|
let mappedValue;
|
||||||
|
if (angle > this.maxRadians)
|
||||||
|
mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);
|
||||||
|
else if (angle < start)
|
||||||
|
mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);
|
||||||
|
else
|
||||||
|
return;
|
||||||
|
|
||||||
|
let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;
|
||||||
|
this.$emit('update:modelValue', newValue);
|
||||||
|
this.$emit('change', newValue);
|
||||||
|
},
|
||||||
|
mapRange(x, inMin, inMax, outMin, outMax) {
|
||||||
|
return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
|
||||||
|
},
|
||||||
|
onClick(event) {
|
||||||
|
if (!this.disabled && !this.readonly) {
|
||||||
|
this.updateValue(event.offsetX, event.offsetY);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMouseDown(event) {
|
||||||
|
if (!this.disabled && !this.readonly) {
|
||||||
|
window.addEventListener('mousemove', this.onMouseMove);
|
||||||
|
window.addEventListener('mouseup', this.onMouseUp);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMouseUp(event) {
|
||||||
|
if (!this.disabled && !this.readonly) {
|
||||||
|
window.removeEventListener('mousemove', this.onMouseMove);
|
||||||
|
window.removeEventListener('mouseup', this.onMouseUp);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onTouchStart(event) {
|
||||||
|
if (!this.disabled && !this.readonly) {
|
||||||
|
window.addEventListener('touchmove', this.onTouchMove);
|
||||||
|
window.addEventListener('touchend', this.onTouchEnd);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onTouchEnd(event) {
|
||||||
|
if (!this.disabled && !this.readonly) {
|
||||||
|
window.removeEventListener('touchmove', this.onTouchMove);
|
||||||
|
window.removeEventListener('touchend', this.onTouchEnd);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMouseMove(event) {
|
||||||
|
if (!this.disabled && !this.readonly) {
|
||||||
|
this.updateValue(event.offsetX, event.offsetY);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onTouchMove(event) {
|
||||||
|
if (!this.disabled && !this.readonly && event.touches.length == 1) {
|
||||||
|
const rect = this.$el.getBoundingClientRect();
|
||||||
|
const touch = event.targetTouches.item(0);
|
||||||
|
const offsetX = touch.clientX - rect.left;
|
||||||
|
const offsetY = touch.clientY - rect.top;
|
||||||
|
this.updateValue(offsetX, offsetY);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
containerClass() {
|
||||||
|
return [
|
||||||
|
'p-knob p-component', {
|
||||||
|
'p-disabled': this.disabled
|
||||||
|
}
|
||||||
|
];
|
||||||
|
},
|
||||||
|
style () {
|
||||||
|
return {
|
||||||
|
height: this.responsive ? this.size + '%' : this.size - 5 + 'px'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computedSize() {
|
||||||
|
return this.responsive ? this.size + '%' : this.size;
|
||||||
|
},
|
||||||
|
rangePath() {
|
||||||
|
return `M ${this.minX} ${this.minY} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX} ${this.maxY}`;
|
||||||
|
},
|
||||||
|
valuePath() {
|
||||||
|
return `M ${this.zeroX} ${this.zeroY} A ${this.radius} ${this.radius} 0 ${this.largeArc} ${this.sweep} ${this.valueX} ${this.valueY}`;
|
||||||
|
},
|
||||||
|
zeroRadians() {
|
||||||
|
if (this.min > 0 && this.max > 0)
|
||||||
|
return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);
|
||||||
|
else
|
||||||
|
return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
|
||||||
|
},
|
||||||
|
valueRadians() {
|
||||||
|
return this.mapRange(this.modelValue, this.min, this.max, this.minRadians, this.maxRadians);
|
||||||
|
},
|
||||||
|
minX() {
|
||||||
|
return this.midX + Math.cos(this.minRadians) * this.radius;
|
||||||
|
},
|
||||||
|
minY() {
|
||||||
|
return this.midY - Math.sin(this.minRadians) * this.radius;
|
||||||
|
},
|
||||||
|
maxX() {
|
||||||
|
return this.midX + Math.cos(this.maxRadians) * this.radius;
|
||||||
|
},
|
||||||
|
maxY() {
|
||||||
|
return this.midY - Math.sin(this.maxRadians) * this.radius;
|
||||||
|
},
|
||||||
|
zeroX() {
|
||||||
|
return this.midX + Math.cos(this.zeroRadians) * this.radius;
|
||||||
|
},
|
||||||
|
zeroY() {
|
||||||
|
return this.midY - Math.sin(this.zeroRadians) * this.radius;
|
||||||
|
},
|
||||||
|
valueX() {
|
||||||
|
return this.midX + Math.cos(this.valueRadians) * this.radius;
|
||||||
|
},
|
||||||
|
valueY() {
|
||||||
|
return this.midY - Math.sin(this.valueRadians) * this.radius;
|
||||||
|
},
|
||||||
|
largeArc() {
|
||||||
|
return Math.abs(this.zeroRadians - this.valueRadians) < Math.PI ? 0 : 1;
|
||||||
|
},
|
||||||
|
sweep() {
|
||||||
|
return this.valueRadians > this.zeroRadians ? 0 : 1;
|
||||||
|
},
|
||||||
|
valueToDisplay() {
|
||||||
|
return this.valueTemplate.replaceAll("{value}", this.modelValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//Inspired from https://github.com/kramer99/vue-knob-control
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@keyframes dash-frame {
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.p-knob-range {
|
||||||
|
fill: none;
|
||||||
|
transition: stroke .1s ease-in;
|
||||||
|
}
|
||||||
|
.p-knob-value {
|
||||||
|
animation-name: dash-frame;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
.p-knob-text {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -41,6 +41,7 @@ import InputMask from './components/inputmask/InputMask';
|
||||||
import InputNumber from './components/inputnumber/InputNumber';
|
import InputNumber from './components/inputnumber/InputNumber';
|
||||||
import InputSwitch from './components/inputswitch/InputSwitch';
|
import InputSwitch from './components/inputswitch/InputSwitch';
|
||||||
import InputText from './components/inputtext/InputText';
|
import InputText from './components/inputtext/InputText';
|
||||||
|
import Knob from './components/knob/Knob';
|
||||||
import Listbox from './components/listbox/Listbox';
|
import Listbox from './components/listbox/Listbox';
|
||||||
import MegaMenu from './components/megamenu/MegaMenu';
|
import MegaMenu from './components/megamenu/MegaMenu';
|
||||||
import Menu from './components/menu/Menu';
|
import Menu from './components/menu/Menu';
|
||||||
|
|
@ -156,6 +157,7 @@ app.component('InputMask', InputMask);
|
||||||
app.component('InputNumber', InputNumber);
|
app.component('InputNumber', InputNumber);
|
||||||
app.component('InputSwitch', InputSwitch);
|
app.component('InputSwitch', InputSwitch);
|
||||||
app.component('InputText', InputText);
|
app.component('InputText', InputText);
|
||||||
|
app.component('Knob', Knob);
|
||||||
app.component('Listbox', Listbox);
|
app.component('Listbox', Listbox);
|
||||||
app.component('MegaMenu', MegaMenu);
|
app.component('MegaMenu', MegaMenu);
|
||||||
app.component('Menu', Menu);
|
app.component('Menu', Menu);
|
||||||
|
|
|
||||||
|
|
@ -397,6 +397,11 @@ const routes = [
|
||||||
name: 'splitter',
|
name: 'splitter',
|
||||||
component: () => import('../views/splitter/SplitterDemo.vue')
|
component: () => import('../views/splitter/SplitterDemo.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/knob',
|
||||||
|
name: 'knob',
|
||||||
|
component: () => import('../views/knob/KnobDemo.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/listbox',
|
path: '/listbox',
|
||||||
name: 'listbox',
|
name: 'listbox',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Knob</h1>
|
||||||
|
<p>Knob is a form component to define number inputs with a dial.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<div class="p-grid p-formgrid p-text-center">
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5>Basic</h5>
|
||||||
|
<Knob v-model="value1" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5>Readonly</h5>
|
||||||
|
<Knob v-model="value2" readonly />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5>Disabled</h5>
|
||||||
|
<Knob v-model="value3" disabled />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Min/Max</h5>
|
||||||
|
<Knob v-model="value4" :min="-50" :max="50" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Step</h5>
|
||||||
|
<Knob v-model="value5" :step="10" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Template</h5>
|
||||||
|
<Knob v-model="value6" valueTemplate="{value}%" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Stroke</h5>
|
||||||
|
<Knob v-model="value7" :strokeWidth="5" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Size</h5>
|
||||||
|
<Knob v-model="value8" :size="200"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Color</h5>
|
||||||
|
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<KnobDoc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import KnobDoc from './KnobDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: 0,
|
||||||
|
value2: 50,
|
||||||
|
value3: 75,
|
||||||
|
value4: 10,
|
||||||
|
value5: 40,
|
||||||
|
value6: 60,
|
||||||
|
value7: 40,
|
||||||
|
value8: 60,
|
||||||
|
value9: 50,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'KnobDoc': KnobDoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,275 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Documentation">
|
||||||
|
<h5>Import</h5>
|
||||||
|
<pre v-code.script>
|
||||||
|
<code>
|
||||||
|
import Knob from 'primevue/knob';
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Getting Started</h5>
|
||||||
|
<p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
|
||||||
|
<pre v-code>
|
||||||
|
<code>
|
||||||
|
<Knob v-model="value" />
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
<pre v-code.script>
|
||||||
|
<code>
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Minimum and Maximum</h5>
|
||||||
|
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
|
||||||
|
<pre v-code>
|
||||||
|
<code>
|
||||||
|
<Knob v-model="value" :min="-50" :max="10" />
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Step</h5>
|
||||||
|
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
||||||
|
<pre v-code>
|
||||||
|
<code>
|
||||||
|
<Knob v-model="value" :step="10" />
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Styling</h5>
|
||||||
|
<p><i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text.
|
||||||
|
In addition, <i>strokeWidth</i> is used to determine the width of the stroke of range and value sections.</p>
|
||||||
|
<pre v-code>
|
||||||
|
<code>
|
||||||
|
<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Size</h5>
|
||||||
|
<p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
|
||||||
|
<pre v-code>
|
||||||
|
<code>
|
||||||
|
<Knob v-model="value" :size="200" />
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Properties</h5>
|
||||||
|
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Default</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>modelValue</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Value of the component.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>disabled</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>When present, it specifies that the component should be disabled.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>readonly</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>When present, it specifies that the component value cannot be edited.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>step</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Step factor to increment/decrement the value.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>min</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>0</td>
|
||||||
|
<td>Mininum boundary value.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>max</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>100</td>
|
||||||
|
<td>Maximum boundary value.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>valueColor</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Background of the value.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>rangeColor</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Background color of the range.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>textColor</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Color of the value text.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>strokeWidth</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td>Width of the knob stroke.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>showValue</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>true</td>
|
||||||
|
<td>Whether the show the value inside the knob.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>valueTemplate</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>{value}</td>
|
||||||
|
<td>Template string of the value.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Events</h5>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Parameters</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>change</td>
|
||||||
|
<td>value: New value </td>
|
||||||
|
<td>Callback to invoke when the value changes.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Styling</h5>
|
||||||
|
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Element</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>p-knob</td>
|
||||||
|
<td>Container element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-knob-text</td>
|
||||||
|
<td>Text element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-knob-value</td>
|
||||||
|
<td>Value element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-knob-text</td>
|
||||||
|
<td>Text element.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Dependencies</h5>
|
||||||
|
<p>None.</p>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/knob" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<pre v-code>
|
||||||
|
<code><template v-pre>
|
||||||
|
<div class="p-grid p-formgrid p-text-center">
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5>Basic</h5>
|
||||||
|
<Knob v-model="value1" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5>Readonly</h5>
|
||||||
|
<Knob v-model="value2" readonly />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5>Disabled</h5>
|
||||||
|
<Knob v-model="value3" disabled />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Min/Max</h5>
|
||||||
|
<Knob v-model="value4" :min="-50" :max="50" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Step</h5>
|
||||||
|
<Knob v-model="value5" :step="10" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Template</h5>
|
||||||
|
<Knob v-model="value6" valueTemplate="{value}%" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Stroke</h5>
|
||||||
|
<Knob v-model="value7" :strokeWidth="5" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Size</h5>
|
||||||
|
<Knob v-model="value8" :size="200"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-4">
|
||||||
|
<h5 class="p-mt-3">Color</h5>
|
||||||
|
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<pre v-code.script>
|
||||||
|
<code>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: 0,
|
||||||
|
value2: 50,
|
||||||
|
value3: 75,
|
||||||
|
value4: 10,
|
||||||
|
value5: 40,
|
||||||
|
value6: 60,
|
||||||
|
value7: 40,
|
||||||
|
value8: 60,
|
||||||
|
value9: 50,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue