2022-09-09 20:41:18 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
2022-12-19 11:57:07 +00:00
|
|
|
<Head>
|
|
|
|
|
<Title>Vue Knob Component</Title>
|
|
|
|
|
<Meta name="description" content="Knob is a form component to define number inputs with a dial." />
|
|
|
|
|
</Head>
|
|
|
|
|
|
2022-09-09 20:41:18 +00:00
|
|
|
<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>
|
|
|
|
|
<AppDemoActions />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content-section implementation">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="grid formgrid text-center">
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5>Basic</h5>
|
|
|
|
|
<Knob v-model="value1" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5>Readonly</h5>
|
|
|
|
|
<Knob v-model="value2" readonly />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5>Disabled</h5>
|
|
|
|
|
<Knob v-model="value3" disabled />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5 class="mt-3">Min/Max</h5>
|
|
|
|
|
<Knob v-model="value4" :min="-50" :max="50" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5 class="mt-3">Step</h5>
|
|
|
|
|
<Knob v-model="value5" :step="10" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5 class="mt-3">Template</h5>
|
|
|
|
|
<Knob v-model="value6" valueTemplate="{value}%" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5 class="mt-3">Stroke</h5>
|
|
|
|
|
<Knob v-model="value7" :strokeWidth="5" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5 class="mt-3">Size</h5>
|
|
|
|
|
<Knob v-model="value8" :size="200" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field col-12 md:col-4">
|
|
|
|
|
<h5 class="mt-3">Color</h5>
|
|
|
|
|
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card text-center">
|
|
|
|
|
<h5>Reactive Knob</h5>
|
|
|
|
|
<Knob v-model="value10" :size="150" readonly />
|
|
|
|
|
<Button label="Increment" @click="value10++" class="mr-2" :disabled="value10 >= 100" />
|
|
|
|
|
<Button label="Decrement" @click="value10--" :disabled="value10 <= 0" />
|
|
|
|
|
</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,
|
|
|
|
|
value10: 0
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
KnobDoc: KnobDoc
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
