117 lines
4.6 KiB
Vue
117 lines
4.6 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs">
|
|
<p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
|
|
</DocSectionText>
|
|
<div class="card flex flex-wrap gap-3 p-fluid">
|
|
<div class="flex-auto">
|
|
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
|
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
|
</div>
|
|
|
|
<div class="flex-auto">
|
|
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
|
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
|
</div>
|
|
<div class="flex-auto">
|
|
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
|
<InputNumber
|
|
v-model="value3"
|
|
inputId="horizontal-buttons"
|
|
showButtons
|
|
buttonLayout="horizontal"
|
|
:step="0.25"
|
|
decrementButtonClass="p-button-danger"
|
|
incrementButtonClass="p-button-success"
|
|
incrementButtonIcon="pi pi-plus"
|
|
decrementButtonIcon="pi pi-minus"
|
|
mode="currency"
|
|
currency="EUR"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DocSectionCode :code="code" />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value1: 20,
|
|
value2: 25,
|
|
value3: 10.5,
|
|
code: {
|
|
basic: `
|
|
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
|
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
|
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
|
|
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
|
|
mode="currency" currency="EUR" />
|
|
`,
|
|
options: `
|
|
<template>
|
|
<div class="card flex flex-wrap gap-3 p-fluid">
|
|
<div class="flex-auto">
|
|
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
|
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
|
</div>
|
|
|
|
<div class="flex-auto">
|
|
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
|
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
|
</div>
|
|
<div class="flex-auto">
|
|
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
|
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
|
|
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
|
|
mode="currency" currency="EUR" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value1: 20,
|
|
value2: 25,
|
|
value3: 10.5
|
|
};
|
|
}
|
|
};
|
|
<\/script>
|
|
`,
|
|
composition: `
|
|
<template>
|
|
<div class="card flex flex-wrap gap-3 p-fluid">
|
|
<div class="flex-auto">
|
|
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
|
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
|
</div>
|
|
|
|
<div class="flex-auto">
|
|
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
|
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
|
</div>
|
|
<div class="flex-auto">
|
|
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
|
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
|
|
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
|
|
mode="currency" currency="EUR" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const value1 = ref(20);
|
|
const value2 = ref(25);
|
|
const value3 = ref(10.5);
|
|
<\/script>
|
|
`
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|