V3 has reached EOL, Upgrade to PrimeVue 4

Inplace

Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.

Import #


import Inplace from 'primevue/inplace';

Basic #

Inplace component requires display and content templates to define the content of each state.

View Content


<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>

Input #

Inplace can be used within a form to display a value as read only before making it editable. The closable property adds a close button next to the content to switch back to read only mode.

Click to Edit


<Inplace :closable="true">
    <template #display>
        {{ text || 'Click to Edit' }}
    </template>
    <template #content>
        <InputText v-model="text" autofocus />
    </template>
</Inplace>

Image #

Any content such as an image can be placed inside an Inplace.

View Picture


<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>

Lazy #

Using the open event, data can be loaded in a lazy manner before displaying it in a table.

View Data


<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>

Accessibility #

Screen Reader

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 locale API by default, you may use closeButtonProps to customize the element and override the default aria-label.

View Mode Keyboard Support

Key	Function
enter	Switches to content.

Close Button Keyboard Support

Key	Function
enter	Switches to display.
space	Switches to display.

name	type	default	description
closable	boolean	false	Displays a button to switch back to display mode.
active	boolean	false	Whether the content is displayed or not.
disabled	boolean	false	When present, it specifies that the element should be disabled.
closeIcon	string	null	Icon to display in the close button.
displayProps	HTMLAttributes	null	Used to pass all properties of the HTMLDivElement to display container.
closeButtonProps	ButtonHTMLAttributes	null	Used to pass all properties of the HTMLButtonElement to the close button.
pt	PassThrough<InplacePassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
update:active	value: boolean	void	Emitted when the active changes.
open	event: Event	void	Callback to invoke when inplace is opened.
close	event: Event	void	Callback to invoke when inplace is closed.

name	returnType	description
display	VNode<RendererNode, RendererElement, Object>[]	Custom display template.
content	VNode<RendererNode, RendererElement, Object>[]	Custom content template.
closeicon	VNode<RendererNode, RendererElement, Object>[]	Custom close icon template.

name	type	default	description
instance	any	null	Defines instance.
props	InplaceProps	null	Defines valid properties.
state	InplaceState	null	Defines current inline state.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
props	InplaceProps	null	Defines valid properties.
state	InplaceState	null	Defines current inline state.

Inplace

Import #

Basic #

Input #

Image #

Lazy #

Accessibility #

Screen Reader

View Mode Keyboard Support

Close Button Keyboard Support

Inplace API

Inplace #

Props #

Emits #

Slots #

Interfaces #

InplacePassThroughMethodOptions #

InplaceSharedPassThroughMethodOptions #

InplacePassThroughOptions #

InplacePassThroughAttributes #

InplaceState #

Types #

InplacePassThroughOptionType #

name	type	default	description
root	InplacePassThroughOptionType	null	Used to pass attributes to the root's DOM element.
display	InplacePassThroughOptionType	null	Used to pass attributes to the display's DOM element.
content	InplacePassThroughOptionType	null	Used to pass attributes to the content's DOM element.
closeButton	ButtonPassThroughOptions<InplaceSharedPassThroughMethodOptions	null	Used to pass attributes to the Button component.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.