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="/inputtext">InputText</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="/multiselect">MultiSelect</router-link>
|
||||
<router-link to="/password">Password</router-link>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
.p-disabled, .p-disabled * {
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.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 InputSwitch from './components/inputswitch/InputSwitch';
|
||||
import InputText from './components/inputtext/InputText';
|
||||
import Knob from './components/knob/Knob';
|
||||
import Listbox from './components/listbox/Listbox';
|
||||
import MegaMenu from './components/megamenu/MegaMenu';
|
||||
import Menu from './components/menu/Menu';
|
||||
|
|
@ -156,6 +157,7 @@ app.component('InputMask', InputMask);
|
|||
app.component('InputNumber', InputNumber);
|
||||
app.component('InputSwitch', InputSwitch);
|
||||
app.component('InputText', InputText);
|
||||
app.component('Knob', Knob);
|
||||
app.component('Listbox', Listbox);
|
||||
app.component('MegaMenu', MegaMenu);
|
||||
app.component('Menu', Menu);
|
||||
|
|
|
|||
|
|
@ -397,6 +397,11 @@ const routes = [
|
|||
name: 'splitter',
|
||||
component: () => import('../views/splitter/SplitterDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/knob',
|
||||
name: 'knob',
|
||||
component: () => import('../views/knob/KnobDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/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