mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-11 01:42:34 +00:00
Button demos updated
This commit is contained in:
parent
d37f12e8d0
commit
bed811ac24
2 changed files with 64 additions and 38 deletions
|
@ -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…
Add table
Add a link
Reference in a new issue