Button demos updated
tugcekucukoglu
parent
d37f12e8d0
commit
bed811ac24
|
|
@ -14,19 +14,14 @@
|
|||
</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"
|
||||
/>
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -43,9 +38,14 @@ export default {
|
|||
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" />
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
|
|
@ -61,9 +61,14 @@ export default {
|
|||
</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" />
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -94,9 +99,14 @@ export default {
|
|||
</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" />
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,14 @@
|
|||
<p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputNumber
|
||||
v-model="value"
|
||||
showButtons
|
||||
buttonLayout="vertical"
|
||||
style="width: 4rem"
|
||||
decrementButtonClassName="p-button-secondary"
|
||||
incrementButtonClassName="p-button-secondary"
|
||||
incrementButtonIcon="pi pi-plus"
|
||||
decrementButtonIcon="pi pi-minus"
|
||||
/>
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -24,14 +22,26 @@ export default {
|
|||
value: 50,
|
||||
code: {
|
||||
basic: `
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
|
||||
decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
|
||||
decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -48,8 +58,14 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
|
||||
decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue