Misc - Inplace - 《PrimeNG Document》

Documentation
Source

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

Documentation

Import


import {InplaceModule} from 'primeng/inplace';

Getting Started

Inplace requires two child components having pInplaceDisplay and pInplaceOutput attributes to define the content of each state.


<p-inplace>
    <span pInplaceDisplay>
        Click to Edit
    </span>
    <span pInplaceContent>
        <input type="text" value="PrimeNG" pInputText>
    </span>
</p-inplace>

Properties

Name	Type	Default	Description
active	boolean	false	Whether the content is displayed or not.
disabled	boolean	false	When present, it specifies that the element should be disabled.
closable	boolean	false	Displays a button to switch back to display mode.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.

Events

Name	Parameters	Description
onActivate	event.originalEvent: Click event	Activates the content.
onDeactivate	event.originalEvent: Click event	Deactivates the content.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-inplace	Container element
ui-inplace-display	Display container
ui-inplace-content	Content container

Dependencies

None.

Source

View on GitHub


<h3 class="first">Basic</h3>
<p-inplace closable="closable">
    <span pInplaceDisplay>
        Click to Edit
    </span>
    <span pInplaceContent>
        <input type="text" value="PrimeNG" pInputText>
    </span>
</p-inplace>
<h3>Image</h3>
<p-inplace>
    <span pInplaceDisplay>
        <span class="fa fa-picture-o"></span><span style="margin-left:8px">View Picture</span>
    </span>
    <span pInplaceContent>
        <img src="assets/showcase/images/demo/galleria/galleria5.jpg" alt="Nature">
    </span>
</p-inplace>
<h3>Data</h3>
<p-inplace>
    <span pInplaceDisplay>
        <span class="fa fa-table"></span><span style="margin-left:8px">View Data</span>
    </span>
    <span pInplaceContent>
        <p-dataTable [value]="cars">
            <p-column field="vin" header="Vin"></p-column>
            <p-column field="year" header="Year"></p-column>
            <p-column field="brand" header="Brand"></p-column>
            <p-column field="color" header="Color"></p-column>
        </p-dataTable>
    </span>
</p-inplace>