import Inplace from 'primevue/inplace';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/inplace/inplace.min.js"></script>
Inplace requires display and content templates to define the content of each state.
<Inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
</template>
<template #content>
<img src="/demo/images/nature/nature1.jpg" />
</template>
</Inplace>
closable property is handy within forms as it enables to switch back to output mode after editing is completed using a button displayed next to the form field.
<Inplace :closable="true">
<template #display>
{{text || 'Click to Edit'}}
</template>
<template #content>
<InputText v-model="text" autoFocus />
</template>
</Inplace>
Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.
<Inplace @open="loadData">
<template #display>
View Data
</template>
<template #content>
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</template>
</Inplace>
import CarService from '../../service/CarService';
export default {
data() {
return {
cars: null
}
},
carService: null,
created() {
this.carService = new CarService();
},
methods: {
loadData() {
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
}
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | Whether the content is displayed or not. |
| closable | boolean | false | Displays a button to switch back to display mode. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| Name | Parameters | Description |
|---|---|---|
| open | event: browser event | Callback to invoke when inplace is opened. |
| close | event: browser event | Callback to invoke when inplace is closed. |
| Name | Parameters |
|---|---|
| display | - |
| content | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-inplace | Container element |
| p-inplace-display | Display container |
| p-inplace-content | Content container |
None.