原地

原地组件提供了一种简单的方式来同时编辑和显示，点击输出会显示实际内容。

导入#


import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';

基础#

Inplace 组件需要 InplaceDisplay 用于显示模式，以及 InplaceContent 用于显示实际内容。

查看内容


<Inplace>
    <InplaceDisplay>View Content</InplaceDisplay>
    <InplaceContent>
        <p className="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>
    </InplaceContent>
</Inplace>

输入#

原地组件可以在表单中使用，在变为可编辑之前将值显示为只读。closable 属性在内容旁边添加一个关闭按钮，以切换回只读模式。

点击编辑


 <Inplace closable>
    <InplaceDisplay>{text || 'Click to Edit'}</InplaceDisplay>
    <InplaceContent>
        <InputText value={text} onChange={(e) => setText(e.target.value)} autoFocus />
    </InplaceContent>
</Inplace>

图像#

任何内容（例如图像）都可以放置在原地组件内部。

查看图片


<Inplace>
    <InplaceDisplay>
        <span className="inline-flex align-items-center">
            <span className="pi pi-image"></span>
            <span className="ml-2">View Picture</span>
        </span>
    </InplaceDisplay>
    <InplaceContent>
        <img className="w-full" alt="Nature" src="/images/nature/nature1.jpg" />
    </InplaceContent>
</Inplace>

懒加载#

使用 onOpen 事件，可以在表格中显示数据之前以延迟方式加载数据。

查看数据


<Inplace onOpen={onOpen}>
    <InplaceDisplay>
        View Data
    </InplaceDisplay>
    <InplaceContent>
        <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>
    </InplaceContent>
</Inplace>

无障碍性#

屏幕阅读器

原地组件默认将 aria-live 定义为“polite”，因为任何有效的属性都会传递到主容器，因此可以轻松自定义根元素的 aria 角色和属性。

默认情况下，显示元素在查看模式下使用 button 角色，可以使用 displayProps 进行自定义，例如添加 aria-label 或 aria-labelledby 属性来描述查看模式的内容，甚至可以覆盖默认角色。

可关闭的原地组件会显示一个带有 aria-label 的按钮，该标签默认引用 locale API 的 aria.close 属性，您可以使用 closeButtonProps 来自定义元素并覆盖默认的 aria-label。

查看模式键盘支持

按键	功能
回车	切换到内容。

关闭按钮键盘支持

按键	功能
回车	切换到显示。
空格	切换到显示。