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. |
| closeIcon | string | pi pi-times | Icon to display in the close button. |
| displayProps | object | null | Uses to pass all properties of the HTMLDivElement to display container. |
| closeButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the close button. |
| 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 |
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.
Display element uses button role in view mode by default, displayProps can be used for customizations like adding aria-label or aria-labelledby attributes to describe the content of the view mode or even overriding the default role.
Closable inplace components displays a button with an aria-label that refers to the aria.close property of the
| Key | Function |
|---|---|
| enter | Switches to content. |
| Key | Function |
|---|---|
| enter | Switches to display. |
| space | Switches to display. |
None.