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

Inplace input demo

pull/5756/head
tugcekucukoglu 2024-05-10 14:15:51 +03:00
parent bbc62888ee
commit d5306b7292
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
doc/inplace/InputDoc.vue
View File

@ -1,14 +1,15 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Inplace can be used within a form to display a value as read only before making it editable. The <i>closable</i> property adds a close button next to the content to switch back to read only mode.</p> <p>Inplace can be used within a form to display a value as read only before making it editable.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Inplace :closable="true"> <Inplace>
<template #display> <template #display>
{{ text || 'Click to Edit' }} {{ text || 'Click to Edit' }}
</template> </template>
<template #content> <template #content="{ closeCallback }">
<InputText v-model="text" autofocus /> <InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</template> </template>
</Inplace> </Inplace>
</div> </div>
@ -22,24 +23,26 @@ export default {
text: null, text: null,
code: { code: {
basic: ` basic: `
<Inplace :closable="true"> <Inplace>
<template #display> <template #display>
{{ text || 'Click to Edit' }} {{ text || 'Click to Edit' }}
</template> </template>
<template #content> <template #content="{ closeCallback }">
<InputText v-model="text" autofocus /> <InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</template> </template>
</Inplace> </Inplace>
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<Inplace :closable="true"> <Inplace>
<template #display> <template #display>
{{ text || 'Click to Edit' }} {{ text || 'Click to Edit' }}
</template> </template>
<template #content> <template #content="{ closeCallback }">
<InputText v-model="text" autofocus /> <InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</template> </template>
</Inplace> </Inplace>
</div> </div>
@ -58,12 +61,13 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<Inplace :closable="true"> <Inplace>
<template #display> <template #display>
{{ text || 'Click to Edit' }} {{ text || 'Click to Edit' }}
</template> </template>
<template #content> <template #content="{ closeCallback }">
<InputText v-model="text" autofocus /> <InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</template> </template>
</Inplace> </Inplace>
</div> </div>