Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
import Inplace from 'primevue/inplace';
Inplace component requires display and content templates to define the content of each state.
<Inplace>
<template #display> View Content </template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</template>
</Inplace>
Inplace can be used within a form to display a value as read only before making it editable.
<Inplace>
<template #display>
{{ text || 'Click to Edit' }}
</template>
<template #content="{ closeCallback }">
<InputText v-model="text" autofocus />
<Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
</template>
</Inplace>
Any content such as an image can be placed inside an Inplace.
<Inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
</template>
<template #content>
<img class="w-full" alt="Nature" src="/images/nature/nature1.jpg" />
</template>
</Inplace>
Using the open event, data can be loaded in a lazy manner before displaying it in a table.
<Inplace @open="loadData">
<template #display> View Data </template>
<template #content>
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</template>
</Inplace>
Inplace component defines aria-live as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.
| Key | Function |
|---|---|
| enter | Switches to content. |