vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Button demos updated

pull/4987/head
tugcekucukoglu 2023-12-20 12:25:33 +03:00
parent d37f12e8d0
commit bed811ac24
2 changed files with 64 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
doc/inputnumber/ButtonsDoc.vue
View File

@ -14,19 +14,14 @@
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label> <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
<InputNumber <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">
v-model="value3" <template #incrementbuttonicon>
inputId="horizontal-buttons" <span class="pi pi-plus" />
showButtons </template>
buttonLayout="horizontal" <template #decrementbuttonicon>
:step="0.25" <span class="pi pi-minus" />
decrementButtonClass="p-button-danger" </template>
incrementButtonClass="p-button-success" </InputNumber>
incrementButtonIcon="pi pi-plus"
decrementButtonIcon="pi pi-minus"
mode="currency"
currency="EUR"
/>
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -43,9 +38,14 @@ export default {
basic: ` basic: `
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" /> <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="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" <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">
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" <template #incrementbuttonicon>
mode="currency" currency="EUR" /> <span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
`, `,
options: ` options: `
<template> <template>
@ -61,9 +61,14 @@ export default {
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label> <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" <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">
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" <template #incrementbuttonicon>
mode="currency" currency="EUR" /> <span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
</div> </div>
</div> </div>
</template> </template>
@ -94,9 +99,14 @@ export default {
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label> <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" <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">
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" <template #incrementbuttonicon>
mode="currency" currency="EUR" /> <span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
</div> </div>
</div> </div>
</template> </template>

48
doc/inputnumber/VerticalDoc.vue
View File

@ -3,16 +3,14 @@
<p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p> <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputNumber <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
v-model="value" <template #incrementbuttonicon>
showButtons <span class="pi pi-plus" />
buttonLayout="vertical" </template>
style="width: 4rem" <template #decrementbuttonicon>
decrementButtonClassName="p-button-secondary" <span class="pi pi-minus" />
incrementButtonClassName="p-button-secondary" </template>
incrementButtonIcon="pi pi-plus" </InputNumber>
decrementButtonIcon="pi pi-minus"
/>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -24,14 +22,26 @@ export default {
value: 50, value: 50,
code: { code: {
basic: ` basic: `
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /> <template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /> <template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
</div> </div>
</template> </template>
@ -48,8 +58,14 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /> <template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
</div> </div>
</template> </template>